diagram.mmd — flowchart
Browser Rendering Pipeline flowchart diagram

The browser rendering pipeline is the sequence of steps a browser performs to convert HTML, CSS, and JavaScript source files into the visible pixels displayed on screen.

When a browser receives an HTML document, it begins by parsing the HTML byte-by-byte into a token stream, then constructing the DOM (Document Object Model) — a tree representation of every element and text node on the page. In parallel, any CSS encountered (inline, embedded, or from linked stylesheets) is parsed into the CSSOM (CSS Object Model), a parallel tree that maps selectors to computed style rules. JavaScript can block both of these steps: a