Rendering process

  1. Build a DOM tree: HTML -> DOM structure
  2. Style calculation:
  • CSS text -> styleSheets
  • Standardize property values in the stylesheet (exp:2em -> 32px)
  • Compute the specific style of each node in the DOM tree: inheritance, cascading
  1. Layout phase: Calculates the set position of visible elements in the DOM tree

  • Create the layoutTree layoutTree

  • Traverses all visible nodes in the DOM tree and adds them to the layout tree

  • Ignore invisible nodes, exp: head, display: none

  • Layout calculation

  1. Layering: generate a dedicated layer for a specific node and generate the corresponding layerTree, layerTree
  • Functions: position, z-index, filter, opacity
  • Clip needs to be clipped (content beyond, scroll bar)
  1. Draw: Draw order + draw instruction = Draw list
  2. block
  • The composition thread will tell you to divide layers into tiles
  1. Rasterization: Map block -> bitmap (map block near viewport generates bitmap first)
  • GPU accelerated bitmap generation -> fast rasterization, saved in GPU memory
  1. Synthesis: send the command DrawQuad, the browser according to this message to generate a page, display