This waits for analytics.js to download AND execute.
``` If `analytics.js` is slow, that second `` doesn't exist yet - not only visually, but in the DOM itself - until the script finishes. This is the single most common accidental performance bug in real sites: one ` ``` Now parsing continues uninterrupted, and `analytics.js` runs once the DOM is ready. ## CSS bytes become the CSSOM **What it actually is.** CSS goes through the same journey - bytes, tokens, tree - but the result is called the CSSOM (CSS Object Model), not the DOM. It happens in parallel with HTML parsing, on its own timeline. **Why people get this wrong.** It's tempting to assume CSS "applies" to the DOM directly once parsed. It doesn't merge with the DOM at parse time - it stays a separate tree of style rules until a later step (covered in Phase 2) combines the two. **The gotcha: CSS blocks rendering, not parsing.** The browser keeps parsing HTML into the DOM even while a stylesheet is loading. But it won't paint anything to the screen until the CSSOM is complete - because showing unstyled content and then snapping in styles a moment later (a flash of unstyled content) is worse than a short blank pause. This is why `` in `
` is standard: get CSS downloading immediately, before the browser has anything worth painting anyway. **Why this saves you later.** A giant CSS file, or a slow CSS request, delays first paint even if your HTML and images are ready. That's the real reason "keep your critical CSS small" is common performance advice - it's not about parsing speed, it's about how long the browser waits before it's allowed to draw. ## Parsing and CSSOM, side by side ```mermaid flowchart LR HTML[HTML bytes] --> Tokens1[HTML tokens] Tokens1 --> DOM[DOM tree] CSS[CSS bytes] --> Tokens2[CSS tokens] Tokens2 --> CSSOM[CSSOM tree] DOM --> Next[Phase 2: Render tree] CSSOM --> Next ``` Both trees build independently and both are needed before the browser can move to the next stage - it can't build a render tree from an incomplete DOM or a half-parsed CSSOM. ## Recap 1. The DOM builds incrementally as HTML bytes stream in - the tree grows live, not all at once. 2. A `