This is the sixth day of my participation in the August Text Challenge.More challenges in August

The previous articles covered url and request processes, but today we will learn how browsers render pages.

A, general

The browser rendering process can be summarized in the following steps:

  1. Read HTML files to build a DOM tree and a CSSDOM tree.
  2. When a JS file is encountered, the DOM tree and CSSDOM tree construction are blocked, and the JS file is loaded first.
  3. Build the render tree and render it to the page.
  4. Repaint or reflow the page when the render tree node changes

Second, the rounding

1. Build a DOM tree and a CSSDOM tree

There are many nodes in HTML document, such as document node, element node, text node, attribute node, comment node and so on. HTML documents are parsed top-down. After the browser reads the HTML file, it goes through the following process: read the document (bytes) -> convert it to characters -> convert it to tags -> convert it to nodes -> build the DOM tree

<html>
<head>
    <meta charset="utf-8" />
    <link href="./asdf.js" />
    <script src="https://afsadfljaslj.js"></script>
</head>
<body>
    <div>
        <h1>Hello World</h1>
    </div>
</body>
</html>
Copy the code

The construction of a CSSDOM tree is similar to that of a DOM tree, because in a CSS document, all elements are nodes, and correspond to the tag nodes in an HTML document. There are hierarchical relationships in each node, such as brothers, fathers and sons, and descendants. Constitute a CSSDOM tree. The process is: read document (bytes) -> convert to character -> convert to label -> convert to node -> build CSSDOM tree

2. JS loading and blocking

When a JS file is encountered, the DOM tree and CSSDOM tree construction are blocked, and the JS file is loaded preferentially, because the browser considers that if the DOM tree construction is carried out at the same time, if there is code to operate on the DOM in the JS, it will waste resources. Such as:

<html>
<head>
    <meta charset="utf-8" />
    <link href="./asdf.js" />
    <script src="./script.js"></script>
</head>
<body>
    <div>
        <h1>Hello World</h1>
    </div>
</body>
</html>
Copy the code
console.log(123);
document.querySelect("h1").innerText = "Hello";
Copy the code

If you load a large JS file, it may take 1, 2 or even 5 seconds, then the DOM tree and CSSDOM tree construction will be delayed, the page can not be rendered to the browser in time, the user experience is very poor. There are two solutions to this:

  • Because HTML documents are parsed from the top down, will<script>Tags are placed at the bottom of the document (for internal files)
  • addasync 和 deferProperty to asynchronously load JS files (for external files)

About ASNYC and Defer:

  • async(applies when JS files don’t care about page DOM elements)
    • The script is executed after loading.asyncThe loading of scripts is not countedDOMContentLoadedEvent statistics.
  • defer(Applicable when JS files are concerned with page DOM elements)
    • A setting was encountered while parsing the documentdeferThe script is downloaded in the background, but does not prevent the document from being rendered after the page has been parsed & rendered. Will wait for alldeferAfter the script is loaded and executed in sequence, the command is triggeredDOMContentLoadedEvents.
  • If you don’t know, usedeferIt’s always safer.

3. Build the render tree

The rendering tree is a combination of DOM tree and CSSDOM tree, and the three are built in parallel, not in sequence, forming the situation of parsing and building and rendering at the same time, so sometimes we will see half of the page rendered, the other half is still blank.

4. Redraw and reflow

When the visual property (visible change) of a node in the render tree changes, it causes redraw and reflow of the page. The difference is as follows:

  • Redraw (repaint):
    • The change of the rendering tree node does not affect the spatial position and size of the node in the page, such as background color and font color, but the width, height and inner and outer margins of the node do not change, which triggers the redrawing of the browser.
  • Reflux (reflow):
    • Also known asrearrangement, when the render tree node changes and affects its geometric properties (such as width, height, padding, margin, float, position, display: None); Etc.), or cause the position of the node to change (e.gleft,top,bottom,rightAnd so onbackflow. The render tree needs to be rebuilt, and all nodes after this node are changed and rearranged.

Note: backflow must cause redraw, and redraw ratio must cause backflow.

Some previous backflow situations:

  1. Add or remove visible DOM elements
  2. Element position changes — display, float, position, overflow, and so on;
  3. Element size changes — margins, padding, borders, width, and height
  4. Content changes – such as changes in text or image size resulting in changes in the width and height of the calculated values;
  5. Page render initialization;
  6. The browser window size changes — when the resize event occurs;

As you can see, backflow consumes much more resources than redrawing.

Third, other

1. The rendering process of browsers with different cores

The rendering process varies from browser to browser in details such as:

This is the main webKit flow:

Here’s Geoko’s main flow:

The main rendering process is the same, although it is different in some places.

2. How can backflow be reduced and avoided

  • CSS:
    • Avoid setting multiple layers of inline styles
    • Change the class at the end of the DOM tree whenever possible
    • To animate, it is best to move away from normal document flow
    • Avoid CSS expressions (e.g., calc())
    • withvisibility: hidden(Render tree has reservations) insteaddisplay: none(The render tree will be removed)
  • JS
    • To avoid manipulating styles frequently, it is best to change them all at once with a class
    • Avoid frequent DOM manipulation and use it if necessarydocumentFragment
    • You can use the “DOM offline operation” (set this element to display: None until the end of the operation, so that only two reflows occur), but the first method is recommended.

I hope you can point out any questions in the comments section, AND I will correct them in time.

New people on the road, but also include more. I am MoonLight, a fledgling small front end.