[Dry goods] Ten minutes to understand the browser rendering process

In an article I wrote before, "Eight Steps of Tianlong" elaborates on what happens after the browser enters the URL, I shared with you the entire process from entering the URL in the browser to the final page display. Some readers have reported to me that the final browser rendering layout is not very clear, so this article starts with a separate explanation of the browser rendering process, and I hope everyone can have new gains.

Browser main component structure

(browser main components)

Rendering Engines - webkit and Gecko

Firefox uses Geoko, a rendering engine developed in-house by Mozilla.

Both Safari and Chrome use webkit. Webkit is an open source rendering engine that was originally developed for the linux platform and later ported to Mac and Windows by Apple.

In this article, I mainly explain the webkit rendering engine. Although the terminology used by webkit and Gecko is slightly different, their main processes are basically the same.

(webkit rendering engine process)

critical rendering path

The critical rendering path refers to the entire process that the browser initially receives the requested HTML, CSS, javascript and other resources, then parses, builds the tree, renders the layout, draws, and finally presents the interface that the client can see.

Therefore, the rendering process of the browser mainly includes the following steps:

Parse HTML to generate DOM tree.
Parse CSS to generate CSSOM rule tree.
Merge the DOM tree with the CSSOM rule tree to generate a render tree.
Traverse the rendering tree to start the layout, and calculate the position and size information of each node.
Draws each node of the render tree to the screen.

Build the DOM tree

When the browser receives the HTML document from the server, it will traverse the document nodes and generate the DOM tree.

It should be noted that the generation process of the DOM tree may be blocked by the loading and execution of CSS and JS. The render blocking problem will be discussed later.

Build CSSOM rule tree

The browser parses the CSS files and generates a CSS rule tree, each CSS file is parsed into a StyleSheet object, and each object contains CSS rules. CSS rule objects contain selector and declaration objects and other objects that correspond to CSS syntax.

render blocking

When the browser encounters a script tag, DOM building will pause until the script finishes executing, and then continue building the DOM. Every time the JavaScript script is executed, the construction of the DOM tree will be seriously blocked. If the JavaScript script also operates the CSSOM, and the CSSOM has not been downloaded and constructed, the browser will even delay the script execution and construction of the DOM until the download of its CSSOM is completed. and build.

So, the position of the script tag is very important. In actual use, the following two principles can be followed:

CSS First: In the order of introduction, CSS resources precede JavaScript resources.
JS after: We usually put the JS code at the bottom of the page, and JavaScript should affect the construction of the DOM as little as possible.

When parsing html, it will insert the new element into the dom tree, search for css, and then apply the corresponding style rules to the element. The search style sheet is matched in the order from right to left.

For example: div p {font-size: 16px}, it will first find all p tags and judge whether its parent tag is a div before deciding whether to use this style for rendering).
Therefore, when we usually write CSS, we try to use id and class as much as possible, and do not over-cascading.

Build the render tree

From the DOM tree and CSS rule tree we can build the render tree. The browser will traverse each visible node starting at the root of the DOM tree. For each visible node, find the CSS style rule it adapts to and apply it.

After the render tree is constructed, each node is a visible node and contains its content and the style of the corresponding rules. This is also the biggest difference between the render tree and the DOM tree. The render tree is used for display, and of course those invisible elements will not appear in this tree, for example. In addition, elements with display equal to none will not be displayed in this tree, but elements with visibility equal to hidden will be displayed in this tree.

render tree layout

The layout phase traverses from the root node of the render tree and determines the exact size and position of each node object on the page. The output of the layout phase is a box model that accurately captures the exact position of each element on the screen with size.

render tree drawing

During the drawing phase, the render tree is traversed and the renderer's paint() method is called to display its contents on the screen. The rendering of the render tree is done by the browser's UI backend components.

reflow与repaint：

According to the layout of the rendering tree, calculate the CSS style, that is, geometric information such as the size and position of each node in the page. HTML is fluid by default, CSS and js will break this layout, changing the appearance and style of the DOM as well as its size and position. At this time, two important concepts should be mentioned: replaint and reflow.
replaint: A part of the screen is redrawn without affecting the overall layout. For example, the background color of a CSS has changed, but the geometric size and position of the element remain unchanged.
reflow: means that the geometry of the component has changed, we need to re-validate and calculate the rendering tree. Either part or all of the render tree has changed. This is Reflow, or Layout.
So we should try to reduce reflow and replaint as much as possible, I think this is one of the reasons why table layout is rarely used nowadays.

display:none will trigger reflow. The visibility: hidden attribute is not an invisible attribute, its semantics is to hide the element, but the element still occupies the layout space, it will be rendered as an empty frame, so visibility:hidden will only trigger repaint , because no position changes have occurred.

In some cases, such as modifying the style of an element, the browser will not reflow or repaint once, but will accumulate a batch of such operations, and then do a reflow, which is also called asynchronous reflow or incremental asynchronous reflow.
In some cases, such as resize windows, change the default font of the page, etc. For these operations, the browser will reflow immediately.

summary

In this article, we have learned about the browser rendering process step by step. I believe that everyone must have gained something new. If you have any questions about the browser rendering process, you are welcome to give feedback. We will communicate, learn and make progress together.

Author: GavinHsueh, QQ/WeChat: 753391279, focuses on website building, operation and maintenance and enterprise web application development technology.
To get more technical articles and participate in interactive exchanges, please pay attention to the public number: