The process by which a browser parses and renders a page

Rendering process

The browser gets the HTML resource and parses the HTML (DOM Tree).
After parsing to CSS, generate STYLE rules based on CSS.
After the DOM tree and CSS rule tree are generated, generate the render tree from the DOM tree and CSS rule tree.
After the render tree is built, the browser calculates the size and layout of the elements.
Draw content to the screen based on the calculated node information (painting)

The rendering process is shown below:

Detailed rendering process

1. Sequence of DOM tree and CSS rule tree

The HTML resources obtained by the browser are parsed from top to bottom to generate a DOM tree. If the inline style and link are encountered, the CSS is handed over to the CSS renderer to build the CSS rule tree. The external style file introduced by the loading link is loaded asynchronously, and the whole CSS rule tree is built in parallel with the DOM tree.

2. Loading Javascript scripts

Since JS can manipulate the DOM, dom parsing stops when HTML is parsed into Javascript scripts; CSS parsing blocks JS execution, so in some cases CSS parsing causes DOM parsing;

Js block DOM parsing


// 1. Add the defer attribute to the script tag. This applies to DOM operations in JS, or to cross-reference relationships with other JS
// Adding the defer attribute will delay the execution of the Javascript script, but the script tag will still be downloaded during HTML parsing
// The defer script will be executed after the DOM parsing is complete and before the DOMContentLoaded event is called, and the JS scripts for the defer property will be executed in sequence, i.e. test1 and test2 after the DOM parsing is complete.
<script src="./test1.js" defer></script>
<script src="./test2.js" defer></script>

// 2. Add async property to script tag. This applies when JS is independent of DOM and other JS files
// Adding the defer attribute will execute the Javascript script asynchronously. Script tags encountered during HTML parsing will be downloaded and executed asynchronously immediately after downloading
// When there are multiple asynchronous JS scripts, the sequence of execution cannot be controlled. Therefore, when there are multiple asynchronous JS scripts, these JS should not have references to each other
// Since the async property is added to make the JS execute immediately after the download, do not perform DOM operations in this JS
<script src="./test1.js" async></script>

Copy the code

MDN: The DOMContentLoaded event is fired after the initial HTML document has been fully loaded and parsed, without waiting for the stylesheet, image, and subframe to be fully loaded.

3. Render tree construction process

Each visible node is traversed from the root of the DOM tree; For example, link tags referencing CSS files, script tags importing JS files, and CSS properties are set to display: None; The nodes of the
Find the corresponding node from the CSS style rules, and then combine it into a render tree according to the node information and style.

4. Reflow and redraw

The concepts of backflow and redraw can be introduced in terms of sections 4 and 5 of the browser rendering process described at the beginning, since backflow and redraw are triggered at page build time.

Backflow: When the size or position of an element changes, the browser invalidates the affected part of the render tree and reconstructs it.

Redraw: When attributes such as the font color of an element change without affecting the layout, there is no need to rebuild the render tree, just redraw the page directly.

PS: To learn more about backflow and redraw, check out my article on how to reduce backflow and redraw

The process by which a browser parses and renders a page