Author: Hanpeng_Chen

Public account: Front-end geek technology

In the previous article, “What happens when a browser enters a URL and displays a page,” we gave an overview of the browser’s rendering process, and today’s article will take a closer look at that.

For many front-end developers, the usual work is focused on business development and you may not have a good understanding of the browser’s rendering phase. In fact, this stage is very important. Understanding the rendering process of the browser allows us to know how our HTML and CSS are parsed and rendered into a page, and to have a corresponding solution when optimizing the page performance.

Let’s start with a question:

How do HTML, CSS, and JS files become pages in the browser?

If you can’t answer, read on.

In chronological order of rendering, the rendering process can be divided into the following sub-stages: DOM tree building, style calculation, layout stage, layering, rasterization, and composite display.

Let’s take a closer look at what each sub-stage does.

1. Build a DOM tree

An HTML document describes the structure of a page, but the browser cannot understand and use HTML directly, so you need to use an HTML parser to translate the HTML into a structure that the browser can understand – the DOM tree.

All content in AN HTML document is a node, which has a hierarchical relationship and is connected to each other to form a DOM tree.

Construction process: Read Bytes of an HTML document, convert Bytes to characters, identify Tokens based on characters, convert labels to Nodes, and build a DOM tree based on Nodes. Refer to the following figure:

Open Chrome’s Developer tools, type Document in the console, and press Enter to see a complete DOM tree structure, as shown below:

The DOM structure printed at the console is almost identical to the HTML content, but unlike HTML, the DOM is a tree structure stored in memory that can be queried or modified using JavaScript.

2. Style calculation

The style calculation phase is used to calculate the style of each element in a DOM node.

2.1 analytical CSS

CSS styles can be introduced in one of three ways:

  • References external CSS files by link
  • CSS inside the style tag
  • Element’s style property is embedded with CSS

As with HTML, browsers cannot directly understand plain text CSS styles. CSS parsers parse CSS into styleSheets, or CSSOM trees.

StyleSheets structure also has query and modification functions:

document.styleSheets
Copy the code

2.2 Standardization of attribute values

Attribute value normalization is a bit literal, but let’s look at the following example to see what attribute value normalization is:

When writing CSS styles, when we set the color attribute value, we often use white, red, etc., but this value browser rendering engine is not easy to understand, so we need to convert all values into the rendering engine easy to understand, standardized calculation value, this process is the attribute value standardization.

White normalized to RGB (255, 255, 255)

2.3 Compute the style of each node in the DOM tree

After completing the standardization of style attribute values, we need to calculate the style attribute of each node. At this stage, we need to know two rules of CSS:

  • Inheritance rule: Each DOM node contains the style of its parent node
  • Cascading rules: Cascading is a basic feature of CSS. It is an algorithm that defines how to combine attribute values from multiple sources.

Style calculation stage is to calculate the specific style of each element in the DOM node, in the calculation process need to comply with the CSS inheritance and cascading two rules.

The final output of this phase is the style of each DOM node and is stored in the ComputedStyle structure.

3. Layout stage

Now that we have the DOM tree and the style of the elements in the DOM tree, we need to calculate the geometry of the visible elements in the DOM tree. This calculation process is called layout.

3.1 Creating a Layout tree

The DOM tree contains some invisible elements, such as the head tag, and elements with the display: None attribute, so we need to build an additional layout tree with only visible elements.

Build process: Start at the root of the DOM tree and add all visible nodes to the layout tree, ignoring invisible ones.

3.2 Layout Calculation

At this point we have a constructed layout tree, and we can begin to calculate the coordinate positions of the nodes in the layout tree. Iterate from the root node and determine the exact size and location of each node object on the page, combined with the style calculated above, saving this information in the layout tree.

The output of the layout phase is a box model that accurately captures the exact location and size of each element on the screen.

4. The layered

Now we have tree layout, also know the location information for each of the elements, but also can’t start drawing page, because the page will be like 3 d transformation, scrolling page, or using z – z axis sorting complex effect, such as the index, in order to more convenient to implement these effect, rendering engine also need generated dedicated for specific node layer, And generate a corresponding LayerTree.

In Chrome, we can open the developer tool and select the Elements-Layers TAB to see the layering of the page, as shown below:

The browser page is actually divided into many layers, which are superimposed to create the final page.

At this point, we have built two trees: the layout tree and the layer tree. Let’s take a look at the relationship between the two trees:

Normally, not every node in the layout tree contains a layer, and if a node has no corresponding layer, then the node is subordinate to the parent node’s layer.

What criteria does that node have to meet to be promoted to a separate layer? As long as one of the following conditions is met:

    1. Elements that have the cascading context attribute are promoted to a separate layer
    1. Places that need to be clipped will also be created as layers.

5. Layer drawing

Once the layer tree is built, the rendering engine will draw each layer in the tree.

The rendering engine implements layer drawing by breaking the drawing of a layer into smaller drawing instructions, which are then sequentially assembled into a list of drawings to be made.

6. Raster operation

When a layer is drawn, a drawing list is generated. This is just a list of drawing orders and drawing instructions. Drawing is actually done by the compositing thread in the rendering engine.

Take a look at the relationship between the render main thread and the composition thread below:

When the drawing list of layers is ready, the main thread submits the drawing list to the composition thread, and the composition thread begins work.

The composition thread will first divide the layer into tiles, usually 256,256 or 512,512.

The composition thread then prioritizes bitmap generation based on the blocks near the viewport, and the actual bitmap generation is performed by rasterization. Rasterization refers to the transformation of a map block into a bitmap. The graph block is the smallest unit for rasterization. The renderer maintains a rasterized thread pool, where all rasterization is performed, as shown below:

7. Composition and display

Once all the tiles have been rasterized, the composition thread generates a command to draw the tiles — “DrawQuad” — and submits the command to the browser process.

The browser process has a component called viz that receives DrawQuad commands from the compositing thread, draws its page contents into memory, and displays them on the screen.

8. To summarize

A complete rendering process can be summarized as follows:

  • The renderer transforms the HTML content into a DOM tree structure that the browser can read.

  • 2. The rendering engine translates CSS styleSheets into styleSheets that browsers can understand, calculating the style of DOM nodes.

  • 3. Create a layout tree and calculate the layout information of the elements.

  • 4. Layer the layout tree and generate a layered tree.

  • Generate a draw list for each layer and submit it to the composition thread.

  • 6. The composition thread divides the layer into blocks and rasterizes the blocks into bitmaps.

  • 7. The composite thread sends the draw block command to the browser process. The browser process generates the page on command and displays it on the monitor.

There are two other concepts we hear a lot about during rendering: rearrangement and redraw. I won’t go into details in this article and will do so in the next article.

If you find this helpful:

1. Click “like” to support it, so that more people can see this article

2, pay attention to the public account: front-end geek technology, we learn and progress together.