Epic: #15
Block: 8 — How Browsers Work: Architecture to Pixels
Series order: 16 of 18
Description
How HTML bytes become a DOM tree (incrementally, via streaming) and how CSS bytes become a CSSOM (necessarily render-blocking) — and how scripts change the whole equation.
Key topics
- HTML tokenisation: bytes → characters → tokens → nodes → DOM tree
- Incremental DOM construction: the parser doesn't wait for the full HTML to arrive
- The preload scanner: a second parser that runs ahead to discover
<link>, <script>, <img> early
- Render-blocking CSS: why the browser won't paint until CSSOM is built
- CSSOM construction: parsing CSS, computing the cascade, building the style tree
<script> behaviour: parser-blocking by default — why scripts stop HTML parsingasync attribute: download in parallel, execute when ready (non-blocking, order not guaranteed)defer attribute: download in parallel, execute after HTML parsed (order preserved)type="module": deferred by default, runs in strict mode, has its own scopeDOMContentLoaded vs load: what each event actually means
Epic: #15
Block: 8 — How Browsers Work: Architecture to Pixels
Series order: 16 of 18
Description
How HTML bytes become a DOM tree (incrementally, via streaming) and how CSS bytes become a CSSOM (necessarily render-blocking) — and how scripts change the whole equation.
Key topics
<link>,<script>,<img>early<script>behaviour: parser-blocking by default — why scripts stop HTML parsingasyncattribute: download in parallel, execute when ready (non-blocking, order not guaranteed)deferattribute: download in parallel, execute after HTML parsed (order preserved)type="module": deferred by default, runs in strict mode, has its own scopeDOMContentLoadedvsload: what each event actually means