Paths/Frontend Engineer/How the Browser Works / The Rendering Pipeline
Trace the Critical Path
The browser parses, lays out, paints and composites. Write the order down so you know which of your files is holding the page up.
Validator
IDLE — checks run live as you type commands; submit when done
01Requirements
live checks- Directory ~/perf exists○
- File ~/perf/critical-path.md exists○
- The document lists the phases in order○
- The document states which resources block the first paint○
02Walkthrough
4 steps- 01
Create the perf directory
The notes live with the rest of the performance material.
mkdir -p ~/perf - 02
Write the phases
Parse the HTML, build the DOM, parse the CSS, build the CSSOM, combine them into the render tree, lay it out, paint, composite.
echo '# The critical path\n\n## The phases\n\n1. parse the HTML and build the DOM\n2. parse the CSS and build the CSSOM\n3. combine them into the render tree\n4. layout, then paint, then composite' > ~/perf/critical-path.md - 03
State what blocks the first paint
Stylesheets block rendering, scripts block parsing. Everything else can wait for the first paint.
echo '\n## What blocks the first paint\n\n- a stylesheet in the head blocks rendering until it is parsed\n- a script without the async attribute blocks parsing\n- a web font blocks the text that uses it' >> ~/perf/critical-path.md - 04
Verify and submit
cat the notes, then submit for validation.
cat ~/perf/critical-path.md
03Stuck?
0 of 3 revealedTake a hint without losing the lab — each one points at the thing to look at, not at the answer.
04AI Tutor
guides, never solvesTell me what you're stuck on — I'll nudge, not solve. Which requirement are you looking at?
04Notebook
saved locally in this browserlearner@lab — ubuntu:24.04
Session is disposable
↑/↓ recalls commands · Ctrl+Enter submits · type help for the command list