I have been collecting gold for a long time. Recently, TAKING advantage of the epidemic, I decided to contribute to the community and started writing. Since the work of their own accumulated articles slowly sorted out to share on the nuggets, code words are not easy, if it is helpful, please like and follow the nuggets account and the public number, I will always share my front end development advanced full stack road, we work together.

Continue to bring you front-end interview will be asked front-end performance optimization questions, tentatively divided into three to bring you.

The last one brought you HTML, CSS, JS optimization, this one will bring you page loading speed optimization, and the network transport layer optimization will follow, so stay tuned.

To read all the articles, click here

Remember the core of this episode: JavaScript is fast, DOM is slow

Reading time: 3 minutes

Read this article to learn:

  • The process from the user entering the URL to seeing the page
  • Page rendering process
  • Performance optimization at the page load level

What happens before the user sees the page

This part of the interview is required to examine a lot of knowledge, a brief introduction, later will be a special article to explain this process.

  • Check the cache
  • DNS Server Searches for the IP address of the web server based on the domain name
  • Three handshake mechanism, four wave mechanism
  • The HTTP request
  • Returns the resource

Page rendering process

A few points before we get to business:

  • The current universal display, for example, has a frame rate of 60 FPS, or 60 frames per second. What is this concept? One second of animation is made up of 60 still pictures connected together. 60FPS is ideal for animation playback, more basic requirements.
  • When we say that the page is stuck, it means that the page is distorted, or the frames are lost, there are no more than 60 frames a second, it doesn’t look smooth
  • The reason for this is that the page takes a long time to render certain frames, which causes the page to stay in those frames for a long time, so the screen gets stuck.

The complete process

  • JavaScript=>Style=>Layout=>Paint=>Composite=>Reflow? =>Repaint?
    • Render the DOM tree and the CSSOM tree
    • Render Tree * traverse the Render Tree to start the layout, calculate the position size information of each node, Render each node of the Tree (composite) on the screen
    • Reflow: The element’s geometric size has changed, and the render tree needs to be reverified and calculated, whether part or all of the render tree has changed
    • Repaint: repaint a part of the screen without affecting the overall layout. For example, the background color of a CSS changes, but the geometric size and position of elements remain the same

Page rendering process optimization

Optimized for dom node display and hiding

  • display:noneThe node is not addedRender TreeAnd thevisibility: hiddenSo, if a node is not initially displayed, set it todisplay:noneIs better.
  • display:noneWill triggerreflowAnd thevisibility:hiddenOnly triggersrepaint, because no change in position was found.
  • In some cases, such as when you change the style of an element, the browser doesn’t immediatelyreflow 或 repaintOnce, instead, you’ll accumulate a batch and do it oncereflow, which is also calledInduction reflow 或 Incremental asynchronous reflow.
  • But in some cases, likeresizeWindow, changed the default font on the page, etc. The browser does this right awayreflow.

Dom depth should be as shallow as possible

Reduce inline CSS and JS usage

Suitable selectors, avoid descendant selectors, wildcard selectors

  • CSS selector matching: From right to left, the last selector is called the key selector. The more special the last selector is, the fewer matches are required

Reduce the layout

  • Layout is a time-consuming operation that reduces redrawing of the page. Use transform to animate without position/width/height, and reduce the influence of layout

Avoid mandatory synchronous layouts

// If we have a set of DOM elements, we need to read their widths and set their heights to match their widthsfor(let i = 0,len = divs.length; i<len; i++){
	 let width = divs[i].clientWidth;
	 divs[i].style.height = width + 'px'; }}}}}}}}}}}}}}}}}}}}}}} Be sure to avoid -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / separation to read and writelet widthArray = [];
for(let i = 0,len = divs.length; i<len; i++){
    let width = divs[i].clientWidth;
    widthArray.push(width);
}
for(let i = 0,len = divs.length; i<len; i++){
    divs[i].style.height = widthArray[i] + 'px';
}
Copy the code

Load and merge JS files asynchronously

  • There is a problem with the number of concurrent requests to a browser:
    • For example, chrome can only have a maximum of six TCP connections per domain
    • Given the number of ports and the cost of thread switching, browsers cannot handle an unlimited number of concurrent requests
    • Bigger is not better, but better browser and server performance is protected by conscience and tacit understanding
    • Thunderbolt, storm video can modify the computer’s maximum number of connections
  • Asynchronous loading of JS files (a future article on this part)
    • asyncway
    • deferway
    • Dynamically createscripttags

Speed up page opening

Page start speed Main indicators: white screen time, first screen time, page load completion time, and all resources are loaded

Reduce render congestion (JS, CSS)

  • Put the script tag after the body
  • Add the attribute defer to the script tag to load it asynchronously, delaying the execution of the script resource

What’s the difference between these two approaches?

The out-of-chain script in the head tag can affect the DOM build and the page image load, especially if there are many scripts, so add defer to avoid blocking.

But the resource loaded with the defer attribute will have the lowest priority, even lower than the image, and the higher-priority resource will be loaded in better order than the lower-priority one. If the presentation of the page is more important than the interaction and you need to load it immediately, add defer, otherwise just place the JS file after the body

Optimize the image:

  • Use responsive images
  • Delayed loading pictures
  • Load images on demand
  • Use Sprite chart, icon font
  • Use SVG diagrams

Compression and caching (a future article on this)

  • Gzip compression, cache-Control, and Etag

Enhance user experience

  • Loading the loading frame
  • Use skeleton screen
  • Added excessive animation effects
  • Proper and timely error handling
  • Humanized waiting interaction

Front-end performance optimization series consists of three parts. Click the profile picture on the home page to continue learning

Please comment if you have any questions. Code word is not easy, point a like to go again!