DOM tree parsing phase

Parsing HTML into A DOM tree: the main process is divided into decoding, tokenization, dom node generation, dom tree construction according to dom node relationship. The DOM tree is created during the web content download process, that is, the HTML bytes are taken, the bytes are parsed and the dom tree is built while other content such as images, styles, scripts, etc., continues to be downloaded

• 1. Decode: convert byte data into corresponding characters according to its encoding mode
• 2: Tokenization: Converting characters into tokens according to W3C specifications, token matching has its own rules, for example<p class="a">text text text</p>, when we match to<We don’t know which token it is, and go on to match the next character<pAt this time, we know that this is the token at the beginning of the P label. In this way, all strings are converted into tokens according to different token rules, as shown in the figure
• 3: Dom nodes are generated according to tokens
• 4: Generates a DOM tree based on dom node relationships

CSSOM tree parsing phase

CSS parsing into A CSSOM tree (CSSOM: CSS Object Model) : Similar to the DOM tree parsing process, decoding, tokenization, CSS node generation, CSSOM tree generation. CSS parsing is parallel to DOM parsing

The layout phase

The layout phase calculates the geometric positions of visible elements in the DOM tree

• 1. Create a layout tree: start from the root node and iterate through the visible nodes in the DOM tree (display: elements in the node and head tags are invisible nodes and will be filtered out at this stage), and add the visible nodes to the layout tree

• 2. Layout calculation: combine the node with the corresponding style object to calculate the specific style of the display node

Layered phase

• Properties with cascading context in the layout tree will be separately promoted to the rendering layer (such as DOM root element, opacity attribute, Z-index, absolute location, etc., will all form the rendering layer). Meanwhile, content overflow and the need to crop elements will also be separately promoted to the rendering layer

Drawing stage

• 1. Create a drawing list: Create a drawing list according to the sequence of drawing instructions, as follows:
• 2. Rasterization (or rasterization) : Rasterization divides the current layer into blocks (so drawing is done in layers) and then generates the corresponding bitmap from the blocks (blocks located near the viewport take precedence over bitmaps)

Synthesis && display stage

• The GPU will synthesize the bitmap uploaded. After the synthesis, it will issue the command DrawQuad to draw the map block

• The browser receives this command and reads the resultant image from the GPU memory and displays it

  • Specifically, the browser will read the synthesized image from THE GPU memory and output it to the rear buffer of the graphics card. The rear buffer of the graphics card gives the content to the front buffer, and finally the screen refreshes the image at a frequency of 60HZ

Start with layers and understand the drawing and composition stages

1. Render Layers: Elements that have the attribute of a cascading context are called a render layer (or a cascading context object), which is divided into three layers: a normal render layer, a root composite layer and a composite layer. For ordinary rendered layers, as long as it is not promoted to the composite layer, it will always be part of the root composite layer

• Render layers can be thought of as flat surfaces on the browser’s Z-axis, such as absolute positioning and Z-Index, which generate render layers

• Cascading context attributes (or what attributes form the render layer) :

  • 1. The document root element, known as the “root cascading context”.

  • 2. The value of position is not static and the z-index value is not auto or 0

  • 3, an element whose opacity property value is less than 1

  • 4. Flex layout elements

  • 5, will-change value Sets any property and the value is a non-initialized value

  • 6. The transform value is not None

  • 7. The value of filter is not None

    

• Three render Layers

  • Root composition layer: The document root element is called the root context, or root composition layer

  • Composite layer: Elements that meet the conditions for forming composite layers are promoted to composite layers

  • Normal rendered layers: layers that do not meet the compound layer condition and are not root elements of the document are normal rendered layers

2. Root composite layer (also known as root cascading context object or root composite layer) : The document root element is the root composite layer, and all elements within this layer share the same graphic context

• All elements in this layer are root composite layers as long as they are not composite layers, regardless of whether the element leaves the document stream, forms a render layer, or is just a normal DOM element

• Graphics context: graphics context in the service of the layer of synthetic layer or composite layer (root) memory management (both in RAM record layer information, in fact, the current bitmap layer), and output the current layer bitmap (by CPU information to calculate the current layer draw a diagram, then output the bitmap into RAM)

• What is a bitmap: the pixel information that makes up the current map block

3. Composite layers (also known as composite layers) : elements that meet the requirements for forming composite layers are promoted to composite layers (and also removed from the document stream). The CPU outputs the bitmap of the current composite layer to RAM, and then all bitmaps of the composite layer in RAM are uploaded to the GPU (VRAM of the GPU, to be exact). The GPU composes these bitmaps (so what the GPU does is composes the bitmap of the composite layer, not the bitmap drawing behavior)

• The relationship between composited and rendered layers: Composited layers can be viewed as special renders that have their own drawing resources (graphics context), while regular renders do not have their own drawing resources (common renders share the graphics context of the root composited layer).

4. Compositing layers (or why hardware acceleration works smoothly) :

Composite layer composite layer is independent of the root, it has its own drawing resources (graphics context) and not with other layers (synthetic layer or other synthetic layer) have interference, so changes in composite layer (reflux, redraw) will not affect the other layers (such as synthetic layer or other synthetic layer), so other layer does not need to return to redraw, This eliminates the need to redraw the entire page

In addition, the current composition layer only uses its own graphics context to re-draw, output the bitmap, and then upload it to GPU to complete layer composition. Meanwhile, the composition of the composition layer is completed by GPU (GPU processing image is faster than CPU), and finally displayed on the screen

And because the composite layer has its own drawing resource, it is also very fast to draw (or output bitmap, although this part uses CPU and RAM) the composite layer

• What is a texture: both a bitmap uploaded from RAM to the GPU (it’s still a bitmap, but in GPU it’s called a texture)

• Conditions for creating a composite layer:

  • 1, 3D transformations: for example translate3D, translateZ and so on (note not 2D transformations, 3D transformations need to include Z)

  • 2. An element of a CSS animation that uses opacity or transform

  • 3, there are synthetic layer descendants and the fixed positioning itself

  • 4, set will-change property, such as will-change:auto

  • 5, using accelerated video decoding

  • 6. Siblings of elements that have a composite layer and a very low Z-index. (That is, elements rendered above the compositing layer)

  • 7. Sibling elements with a composite layer and a very low Z-index. (That is, elements rendered above the compositing layer)

  • .

  • Note: Layers are not created when elements are missing or hidden (these elements are filtered out in the layout stage)

5. There is no need to redraw the scene in the compositing layer: if a compositing layer only has its compositing property opacity or transform changed, the layer does not need to be repainted, and the layer can be composited again (see, reflow and redraw are avoided here, although compositing is not avoided).

• Why doesn’t the Transform animation trigger a backflow redraw: In short, the Transform animation is controlled by the GPU, supports hardware loading, does not require software support for rendering, and the GPU simply recombines the texture (bitmap) of the composite layer that already exists in the GPU

6. Layer explosion and layer compression

• Layer explosion: See condition 7 for generating composite layer. If an element with a small Z-index is a composite layer, then if it has a large number of sibling nodes, and the Z-index of sibling nodes is larger than the composite layer, a large number of unnecessary composite layers will be implicitly generated, namely layer explosion, thus occupying a large amount of memory (RAM) and drawing resources (CPU,GPU).

• Layer compression: As you can see from the example of layer explosion above, it is very easy to accidentally create a large number of composite layers, consuming CPU and memory (RAM) resources. Therefore, browser pages provide a coping mechanism, namely layer compression. Specifically, if multiple render layers overlap one composite layer, These render layers are compressed into a graphic layer (composite layer) to prevent layer explosion. Therefore, for the scene in the example of layer explosion above, because the sibling node is a composite layer and the zindex is small, other sibling nodes with large zindex implicitly generate a large number of composite layers. Layer compression saves resources by squeezing all of these implicitly generated overlapping compositing layers into one compositing layer.

  • But layer compression is not universal, such as for video elements layer cannot be compressed, and at the same time other rendering layer cannot be compressed into the video element in the composite layer, for example, if will break the rendering order, then layer compression cannot come into effect, there are many other scenarios, so don’t too rely on layer compression mechanism, You still have to have proper control over your code specification.

7. The best way to improve the synthesis layer:

• Settings will change attribute, can set will – change attribute to opacity, transform, top, left, right, bottom current element will ascend into composite layer. Note that the corresponding positioning attribute (relative, etc.) should be set for will-change of top, left and other attributes.

• For browsers that are not compatible with will-change, the common method of elevating a composite layer is to set the 3D Transform property to force it to be a composite layer, as shown in the CSS Settings:

  #target{
      transform:translateZ(0);
  }
  Copy the code

8. Performance optimization related to compositing layers

• 1. Use transform or opacity to achieve animation effects: The most ideal rendering pipeline does not need backflow and redrawing, but only needs to do the synthesis, so the only properties of the synthesis layer that meet this condition are transform and opacity

  • Note: Transform and opacity do not trigger paint only when an element is promoted to a composite layer, or if it is not a composite layer, paint will still be triggered

• 2. Reduce drawing areas: For some fixed areas on the page, upgrade them to a composite layer to avoid redrawing the page together

  • For example, if the navigation bar is fixed at the top, it will be redrawn when the page is redrawn. The navigation bar is usually unaltered, so you can raise it to a composite layer to avoid redrawing the navigation area

• 3, avoid excessive use of composite layers: the performance optimization brought by composite layers is significant, but at the cost of CPU and memory overhead, so avoid excessive use of composite layers, as well as some implicit generation of composite layers (layer explosion), etc

Thanks for reference:

• Wireless performance optimization: Composite
• Speed up rendering – layer models in Chrome
• Relationship between Render Layer and Graphics Layer
• Browser Rendered Layers vs. Composite Layers (Hardware-accelerated)
• Layered context rendering layers Compound layers (hardware accelerated) distinguish and relate
• Browser Rendering (Thread Perspective 2)