Chapter 10 — How HTML Works: From Bytes to Pixels
This is the heart of the course. We step inside the browser engine to trace the entire rendering pipeline—from raw network bytes all the way to hardware‑accelerated pixels on the screen. You will learn exactly how the HTML parser builds the DOM, how error recovery works, and how the layout, paint, and compositing phases transform a tree of nodes into a visual masterpiece.
What’s Inside This Chapter
- Section 10.1 — The Rendering Pipeline & Speculative Optimization
Bytes → Characters → Tokens → DOM tree. The four core phases, plus the preload scanner that fetches resources in the background. - Section 10.2 — The HTML Parser, Interlocking & Fault Tolerance
Streaming parsing, the style‑script interlock, and the error recovery algorithms (adoption agency, foster parenting) that keep the web stable. - Section 10.3 — The Live Tree Architecture
Element, Text, and Comment nodes. Why whitespace creates invisible text nodes, and the critical difference between source code and the live DOM. - Section 10.4 — Character Encodings & The 1024‑Byte Buffer Rule
The encoding determination hierarchy (BOM → HTTP → meta charset), the 1024‑byte rule, speculative restart, and Mojibake. - Section 10.5 — User‑Agent Stylesheets & Element Defaults
The browser’s built‑in CSS that gives every element a baseline appearance. Block vs. inline defaults and margin collapsing. - Section 10.6 — The Dual Viewport Specification
Layout viewport vs. visual viewport, the 980‑pixel legacy default, and the viewport meta tag that normalises responsive design. - Section 10.7 — HTML Content Categories & Nesting Restrictions
The eight content categories, transparent elements, and the hard nesting bans that prevent interactive element overlap. - Section 10.8 — DOM Interfaces & the C++ Binding Layer
The JavaScript‑to‑C++ bridge, the interface inheritance chain (EventTarget → Node → Element → HTMLElement), and live vs. static collections. - Section 10.9 — From Tree to Screen: Layout, Painting & Compositing
Render tree construction, layout (reflow), paint order, and GPU compositing – the final journey to the screen. - Section 10.10 — Serialization & Developer Tool Instrumentation
innerHTML,outerHTML,insertAdjacentHTML, their security risks, and the developer tools that reveal the live DOM, accessibility tree, and console diagnostics. - Section 10.11 — The Living Standard Workflow & Modern Evolution
The WHATWG Living Standard lifecycle, Web Platform Tests, and the defensive engineering practices of feature detection and progressive enhancement.
START READING
Turn to Section 10.1 and begin the journey from network byte to painted pixel.