How Does the Browser Turn HTML Into Pixels?
Walk through how the browser turns HTML into pixels.
Answer out loud in under a minute: a definition, one concrete example, and one pitfall or trade-off.
Hints
Hint 1
Learn the pipeline as six numbered steps, and say which of them scripts and CSS can block.
Solution
Show the approach
Answer
- Parse HTML into the DOM. A plain
<script>pauses the parser;deferandasyncdo not. - Parse CSS into the CSSOM. CSS blocks rendering, and it also blocks any script that follows it.
- Build the render tree from the visible nodes and their computed styles.
display: nonenodes are left out. - Layout, also called reflow: compute every box's size and position.
- Paint pixels into layers.
- Composite the layers on the GPU.