Rendering Mainstream Process
The rendering engine first obtains the content of the requested document through the network, usually in 8K blocks. The following is the basic process of rendering engine after obtaining content:
Parse HTML to build DOM tree – > build render tree – > layout render tree – > Draw render tree
Here, I will explain some concepts for you to understand.
DOM Tree: Browsers parse HTML into tree-shaped data structures.
CSS Rule Tree: Browsers parse CSS into tree-shaped data structures.
Render Tree: DOM and CSSOM are merged to generate Render Tree.
Layout: With Render Tree, browsers can already figure out which nodes are in the web page, the CSS definitions of each node and their affiliations, and then calculate the location of each node on the screen.
Painting: Draw the content on the screen by graphics card according to the calculated rules.
Reflow (reflow): When the browser finds that some part of the layout has changed a little, it needs to go back and re-render. The expert calls this process reflow. Reflow starts with the root frame < HTML > and recursively calculates the geometric size and location of all nodes in turn. Reflow is almost inevitable. Some popular effects on the interface, such as folding and unfolding of tree directories (essentially the display and hiding of elements), will cause reflow of browsers. Mouse skips, clicks… As long as these actions cause changes in the occupancy area, location method, margin and other attributes of some elements on the page, they will cause the re-rendering of its interior, surrounding and even the whole page. Usually we can’t predict which part of the browser’s code will reflow, and they all interact with each other.
Repaint: when changing the background color, text color, border color and so on of an element without affecting the attributes of its surrounding or internal layout, part of the screen should be redrawn, but the geometric size of the element has not changed.
(1) Display: none nodes will not be added to Render Tree, while visibility: hidden will, so if a node is not displayed initially, it is better to set display: none.
(2) Display: none triggers reflow, while visibility: hidden only triggers repaint because no change in location is found.
(3) In some cases, for example, by modifying the style of the element, the browser will not immediately reflow or repaint once, but will accumulate a batch of such operations and then reflow once, which is also called asynchronous reflow or incremental asynchronous reflow. But in some cases, such as resize window, change the default font of the page, etc. For these operations, the browser will reflow immediately.
Although Webkit and Gecko use slightly different terminology, the process is basically the same.
- The browser will parse HTML into a DOM tree, and the construction of the DOM tree is a deep traversal process: all the child nodes of the current node are built before the next sibling node of the current node is built.
- Parse CSS into CSS Rule Tree.
- Rendering Tree is constructed according to DOM tree and CSSOM. Note: Rendering Tree Rendering Tree Rendering Tree Rendering Tree Rendering Tree Rendering Tree Rendering Tree Rendering Tree Rendering Tree Rendering Tree Rendering Tree Rendering Tree Rendering Tree Rendering Tree Rendering Tree Rendering Tree Rendering Tree Rendering Tree Rendering Tree Rendering Tree Rendering Tree Rendering Tree Rendering Tree
- With Render Tree, browsers can already know which nodes are in the web page, the CSS definitions of each node and their affiliations. The next step is called layout, which, as the name implies, calculates the location of each node on the screen.
- The next step is to draw, that is, traverse the render tree and draw each node using the UI back-end layer.
Note: The above process is gradual. For a better user experience, the rendering engine will render the content on the screen as early as possible, and will not wait until all HTML is parsed before building and laying out the render tree. After parsing a part of the content, it displays a part of the content, and at the same time, it may be downloading the rest of the content through the network.