This is the 8th day of my participation in the August Text Challenge.More challenges in August

Rendering process:

  1. Enter the URL. The browser obtains the IP address of the domain name based on the DNS server
  2. The request is made to the server, the server returns the request, and the client gets the returned content
  3. Generate the DOM tree from top to bottom
  4. Render the CSS tree to generate the CSSOM
  5. Render layout, compute node size, position
  6. Render the page according to the above

thinking

During rendering, if

So that’s why it’s recommended to place the script tag at the bottom of the body tag

structure

The root of a DOM tree is a document, the left branch and the right rod are head and body, and the following are the leaves of the tree

Backflow/rearrangement:

When part or all of the render tree needs to be rebuilt due to layout issues, there will be backflow/rearrangement, and every page will have to be reloaded once, for the first time

Redraw: Redraw occurs when a part of the render tree needs to be rebuilt due to style issues

Rearrangements must be redrawn, but redrawing does not have to be rearranged

Rearranging and redrawing can cause browser time, lag, etc., so don’t repeat dom changes frequently

Optimize according to the above questions

  1. Change the classname directly
  2. If you want to create multiple DOM’s, add them all at once
  3. For elements that need to be rearranged multiple times, setting absolute positioning out of the document stream will not affect other elements
  4. Avoid USING CSS expressions
  5. Avoid table layouts

So we have the virtual DOM to optimize this

The virtual DOM is a js tree that is rendered into the document stream once it is built

The DIFF algorithm is used for update. The DIFF algorithm involves a key, which is used to ensure that the node location can be found accurately for change. Otherwise, repeated construction of subsequent nodes will be caused and unnecessary performance will be consumed