How does the browser render a page

parsing and building the DOM tree

Some rules for parsing HTML files to build a DOM tree:

1, the external style blocks subsequent script execution until the external style is loaded and parsed.

2, external styles do not block the loading of subsequent external scripts, but will block the execution of external scripts.

3, if the subsequent external script contains an async attribute (ie, defer), the external style does not block the script from loading and running.

4, the dynamically created link tag does not block the loading and execution of dynamically created script, regardless of whether the script tag has an async attribute, but for other non-dynamically created script, the above three conclusions still apply

Building a rendering tree

After parsing the HTML, we start to build the rendering tree Rendertree, which is the main task of applying CSS styles to the DOM nodes, the WebKit kernel calls this process an attachment, and other browsers have different concepts. This process involves CSS cascading issues for front-end engineers.

The first is to sort by the importance of the style, from low to High:

1, browser declaration

2, User general statement

3, author General statement

4, author important statement

5, user important statement

For the same important level, the precedence is determined according to the specified degree of CSS selectors;

Priority levels at each level:

Important > Inline > ID > class > tags | pseudo-Class | Property selector > Pseudo-object > Wildcard > Inheritance

1, the weight value is related to the type and number of selectors

2, the precedence of a style is related to the order in which the style is defined

Each node of the rendering tree is the CSS box of its corresponding DOM node, the type of the box is related to the display property of the DOM node, the block element generates a block box, and the inline element generates an inline box, and each render tree node has a corresponding DOM node. However, the DOM node does not necessarily have a corresponding render tree node, such as a DOM node with the display property of None, and the rendering tree nodes in the render tree are not necessarily the same as their position in the DOM tree, such as float and absolute positioning elements.

Layout

Position the coordinates and size of the element, whether the line wraps, various position, overflow, z-index properties

Drawing

Here are two concepts, one is Reflow and the other is Repaint.

Part of the repaint screen is redrawn, such as the background color of a CSS, but the geometry of the element does not change.

Reflow means that the geometry of the component has changed, and we need to re-verify and calculate the render tree. is part or all of the render tree has changed, which is reflow or layout. The cost of reflow is much higher than the cost of repaint, each node in DOM tree has a reflow method, and the reflow of a node is likely to result in a child node, even the parent node and the reflow of the sibling node.

Display:none will trigger Reflow, and Visibility:hidden will only trigger repaint.

Reference

Answer the winter nine to tell the end of the input URL press ENTER, to see the Web page what happened in the process.

CSS selectors, precedence and matching principles

How does the browser render a page