The Parsing Phase
How the browser converts raw bytes of HTML into a functional Document Object Model.
What it is
When a browser receives a response from a server, it receives raw network bytes. The **Parsing Phase** is the browser's engine converting those 1s and 0s into the DOM (Document Object Model).
This process happens in four strict steps: **Bytes -> Characters -> Tokens -> Nodes -> DOM**.
Why it matters
Understanding parsing is the foundation of web performance. The browser cannot render the page until it constructs the DOM.
If the parser encounters a synchronous <script> tag, it completely pauses DOM construction to download and execute the script. This is known as a **render-blocking resource**.
How it works
1. **Bytes & Characters**: The browser reads the raw bytes and translates them into characters (e.g., UTF-8).
2. **Tokens**: The tokenizer reads characters and looks for HTML tags (like <html>, <body>), converting them into distinct tokens.
3. **Nodes**: As tokens are emitted, they are converted into Node objects containing properties and rules.
4. **DOM Tree**: Because HTML tags are nested, the nodes are linked together into a tree structure capturing the parent-child relationships.
Try it
Watch the tokenizer convert raw HTML into DOM nodes.
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
- The parsing pipeline is: Bytes -> Characters -> Tokens -> Nodes -> DOM.
- Synchronous scripts block the HTML parser.
- Browsers parse HTML incrementally as chunks stream over the network.
Done with this concept?
Mark it complete to track your progress. No login needed.