CodePark/ questions / Rendering pipeline & critical path
START PRACTICINGPRACTICE
Frontend question · Browser & web performance › Rendering pipeline & critical path

Explain the critical rendering path: DOM, CSSOM, render tree, layout, paint and composite.

The critical rendering path is the list of steps the browser takes to turn HTML, CSS and JavaScript into pixels.

The steps are:

  • DOM: the browser parses the HTML into the DOM (Document Object Model: the tree of elements).
  • CSSOM: the browser parses the CSS into the CSSOM (CSS Object Model: the tree of style rules).
  • Render tree: the DOM and CSSOM combine into the render tree. It holds only visible nodes, with their computed styles. Elements with display: none and the <head> are left out.
  • Layout (also called reflow): the browser calculates the size and position of each box.
  • Paint: the browser fills in pixels for text, colours, borders and images. It often paints into separate layers. Picture a stack of transparent sheets, each with part of the page drawn on it.
  • Composite: the browser draws those layers in the right order on screen. This usually happens on the GPU (the graphics chip).

To make this path faster, you reduce three things:

  • the number of critical resources (render-blocking CSS and parser-blocking scripts)
  • the size of those resources
  • the number of round trips to the server before the first render
  • The browser builds the DOM from HTML and the CSSOM from CSS.
  • The render tree holds only visible nodes, so display: none elements and the <head> are left out.
  • Layout computes the size and position of each box.
  • Paint fills in the pixels, and composite puts the layers together on screen.
  • The goal is fewer and smaller critical resources and fewer round trips.