Skip to main content

How does a browser render a webpage?

There are 6 general steps in this process:

  1. Construct DOM tree: a tree of nodes corresponding to HTML elements
  2. Construct CSSOM tree: a tree of nodes corresponding to CSS selectors
  3. Construct Render tree: The browser traverses the DOM tree and matches every element with the appropriate style from the CSSOM tree.
  4. Layout phase. geometry phase where browsers calculate the position of every element
  5. Painting phase. The browser uses a render tree to paint or display pixels currently within your viewport
  6. Repainting phase: if we change the DOM tree, the browser must repaint the affected regions