The rendering pipeline
HTML parsing is incremental
Understand how the parser builds the DOM as bytes arrive and why some scripts can pause that process.
8 minute lesson
The browser does not normally wait for the complete HTML response before building the DOM.
It decodes incoming bytes, tokenizes markup, and creates nodes incrementally. This lets resource discovery and rendering begin while more HTML is arriving.
A classic script can pause the parser:
<script src="/app.js"></script>The script may call document.write() or inspect the DOM at that exact location. The browser must fetch and execute it before continuing the main parse.
defer lets a classic external script download during parsing and run after the document is parsed. async runs when ready and does not preserve document order with other async scripts.
Open the Network and Performance panels, throttle the network, and compare a blocking script with the same script using defer. Look for the parser pause and the later DOMContentLoaded timing.
Exercise: put visible text before and after a delayed classic script. Observe when each part appears.
Lesson completed