Good article links: www.xuanbiyijue.com/2020/07/25/…

Rendering process

Build a DOM tree

  • The input is an HTML file that is parsed by an HTML parser and outputs a DOM tree.
  • The DOM is a tree structure that is stored in memory and its contents can be queried or modified using JavaScript.

Style calculation

  1. Convert CSS to styleSheets structures that browsers can understand
  2. Transform property values in the stylesheet to standardize them
  • For example, 2em is resolved to 32px; Red is resolved to RGB (255,0,0); Bold resolves to 700…
  1. Compute the specific style of each node in the DOM tree
  • CSS Inheritance Rules
  • CSS cascading rules

Layout stage

  1. Creating a layout tree
  • Iterate over all visible nodes in the DOM tree and add these nodes to the local tree
  • Invisible nodes are ignored by the layout tree, such as all content under the head tag, or nodes with display: None style
  1. Layout calculation
  • Computes the coordinate positions of nodes in the layout tree

Layered LayerTree

  1. Elements with cascading context attributes are promoted to a separate layer
  • Document root<html>
  • An element whose position is absolute or relative and whose Z-index is not auto
  • Elements whose position value is fixed or sticky () (Sticky positioning works on all mobile browsers, but not on older desktop browsers)
  • Child element of the Flex container, and z-index is not auto
  • A child element of the grid container, and z-index is not auto
  • An element whose opacity property is less than 1
  • An element whose transform property value is not None
  • Filter Element whose attribute value is not None
  1. Areas that need to be cropped will also be created as layers

Layer to draw

  • The rendering engine will break down the drawing of a layer into smaller drawing instructions, which are then sequentially assembled into a list of drawings to be made
  • A draw list is just a list of draw orders and draw instructions that are actually done by the compositing thread in the rendering engine
  • When the drawing list of layers is ready, the main thread submits the drawing list to the composition thread

block

  • The composition thread divides the layer into tiles, which are usually 256 in size256 or 512512

rasterizer

  • The compositing thread takes precedence over the bitmap generated by the viewport attachment
  • The actual bitmap generation is performed by rasterization
  • The so-called rasterization refers to the transformation of map blocks into bitmaps
  • Bitmaps are the smallest unit of rasterization execution
  • The renderer process maintains a rasterized thread pool, where all rasterization of blocks is performed
  • Rasterization process will use GPU to accelerate generation
  • The process of using a GPU to generate bitmaps is called fast rasterization, or GPU rasterization
  • The rendering process sends the instruction to GPU to generate the map block, and then executes the bitmap in GPU to generate the map block, and saves it in GPU memory

Composition and display

  • Once all the tiles are photodeleted, the composite 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 a “DrawQuad” command from the compositing thread, draws its page contents into memory, and displays them on the screen.