This is the second day of my participation in the August More text Challenge. For details, see: August More Text Challenge

preface

Performance optimization is the subject of every front end. When it comes to performance optimization, search the Internet for N tips for front-end performance optimization, such as:

1. Reduce the number of HTTP requests. 2. Use the CDN. 3. Add the Expires header; 4. Avoid redirection. 5. Place the CSS style at the top of the page. 6. Move the script to the bottom. 7. Reduce DOM operations; 8. Size the image; 9. Reduce DNS query. 10. Compress JavaScript and CSS…

Crackling a lot, this is not a good memory for me, this trivial and unorganized 1.2.3, too difficult ah, can you first induction? Such as:

Performance optimization at the network layer: 1. Reduce the number of HTTP requests. 2. Use the CDN. 3. Add the Expires header; 4. Avoid redirection. 9. Reduce DNS query. 10. Compress JavaScript and CSS…

Render level performance optimization: 5. CSS style at the top of the page 6. Move the script to the bottom. 7. Reduce DOM operations; 8. Size the image; …

Well, that sounds better, but can it be clearer who said it and why? Is there, alas, a traceable thread to tie these scattered pieces together? Until I read Front-end Performance Optimization critical Path To Render Optimization, Front-end Performance Optimization Principles and Practices, and it became clear to me: just follow the process of web requests and browser rendering mechanisms, and I know why and how to do it.

Network request Angle

The process of network requests

  1. DNS to obtain the IP address corresponding to the URL
  2. Establish a TCP connection based on IP (three-way handshake)
  3. HTTP initiates a request
  4. The server processes the request, and the HTTP response is returned (the browser renders the page, in the next section)
  5. Close the TCP connection (four waves)

Optimization direction thinking

  1. DNS resolution: You can use the browser DNS cache and DNS Prefetch to reduce the number of times the resolution is performed or to prefetch the resolution
  2. TCP connection: long connection, preconnection, and ACCESS SPDY protocol
  3. HTTP requests: To reduce the number of requests and the size of requests, use browser caching, local storage, resource consolidation and compression, image optimization, etc.

Page rendering Angle

Apply colours to a drawing mechanism

Basic steps of browser rendering

  1. Process the HTML tags and build the DOM tree
  2. Process the CSS tags and build the CSSOM tree
  3. Merge the DOM and CSSOM into a Render Tree
  4. Layout according to the render tree to calculate the geometric information of each node
  5. Draws the individual nodes to the screen

Note that the Render Tree relies on the CSSOM Tree, and if the page references an external stylesheet, the page has to wait for the stylesheet to load before rendering. In addition, the JS engine and the UI rendering engine are mutually exclusive, so the browser gives control to the JS engine when the script is executing, and to the UI engine when the script is executing (which is related to the browser’s process management).

Reflux with redraw

The above is just a theoretical rendering process, but the actual page rendering is not so smooth from the top to the end of the rendering. For example, what happens if JS changes the DOM structure of a synchronous Script encountered during rendering? The concept of “reflux and redraw” needs to be mentioned here.

Optimization direction thinking

  1. Reduce blocking factors for the first rendering of the page
  2. Try to avoid operations that result in reflux and redrawing
  3. Use lazy loading to optimize the first screen rendering
  4. Server-side rendering…

With this understanding of the flow of web requests and the mechanics of rendering pages, you can now understand why CSS files should be placed at the top of the page, JS files at the bottom, and why DOM operations should be reduced.

In fact, there are a lot of details are not clear, here let’s first put forward a direction, more specific plans in the following chapter to see.

Refer to the link

Browser rendering process and performance optimization: The critical path to front-end performance optimization Illustrate how a browser works