DOM - page rendering process

After the user enters the url (web address) in the browser address bar, the stage that the page goes through when the page is rendered:

1. The browser receives the URL and starts the network request thread.
2. A complete HTTP request is issued
3. The server receives the request and goes to specific background processing
4. HTTP interaction between front and backend and designed caching mechanism
5. The critical rendering path after the browser receives the packet
6. The parsing process of the JS engine

（For the specific process, please check and learn online by yourself)

The general process of loading an html document by a browser is divided into the following stages:

1) Parse tags, text, comments, attributes, etc. into a node tree (DOM Tree)

2) When parsing nodes in the node tree (DOM Tree), different operations will be performed if different elements are encountered:

    a. If css code is encountered, the css code will be parsed into a CSS style structure

B. When encountering src, it will load (network request) resources

3) Combine the CSS style structure with the node tree DOM Tree into a render tree/Render Tree

4) Draw the page according to the Render Tree

Redraw and Reflow

Redraw: It is to redraw and render the page according to the structure of the document tree

Reflow: The number of elements on the page and the position of the nodes in the tree have changed

Relationship between redrawing and reflow: reflow must cause redrawing, but redrawing does not necessarily cause reflow

 
hello
change

Frequent redrawing and reflow will cause poor page performance. Therefore, when operating the page, try to avoid high-frequency redrawing and reflow.

For example: Create 10,000 cells in a table. If ordinary creation and addition, it will be redrawn and reflowed frequently, so we can create an element to carry the element to be rendered:

Using this method, you can avoid high-frequency redraw and reflow operations, and it will not affect the performance of the page.