Follow markup and styles through to pixels on a screen, well enough to say why a page is slow to appear, why it jumps while loading, and which of your changes will cost a full relayout and which will not

How a Browser Draws a Page

Between the bytes arriving and the page appearing is a pipeline with distinct stages. This course covers parsing, the two trees, layout, paint, and what blocks each stage from starting.

8 lessons, written and corrected before you arrived. Reading them here needs no account. The first reads the whole way through; the others open and then stop, because a page nobody owns cannot tell who is reading it. Starting the course gives you your own copy, where every idea has problems standing under it and you can ask about any sentence.

Start reading

01The Browser Starts Building the Page Before It Has Finished Reading It, and One Tag in the Wrong Place Stops the Whole Production LineMarkup becomes a tree while the bytes are still arriving. This lesson follows that conversion, then shows what happens to it the moment the parser meets a script.
02Every Element Has a Value for Every Property Whether You Wrote One or Not, and the Browser Will Not Place a Single Box Until It Knows Them Allopening onlyHow competing rules are reduced to one value per property for every element, where inherited and default values come from, and why nothing can be positioned until this finishes.
03Four Things Stand Between a Document Arriving and Anything Appearing, and Only One of Them Is Usually the Reason Your Page Is Slowopening onlyThe complete list of what prevents the first frame, what each one costs in practice, and the three questions that tell you which item is actually holding your page.
04Width Flows Downwards and Height Flows Back Up, Which Is Why the Browser Has to Visit Every Box Twice and Why One Careless Property Makes It Visit Them Foreveropening onlyLayout computed by hand on a small tree, the two directions information travels, and the structural reason a parent cannot know its own height until its children are finished.
05The Boxes Are Placed and Nothing Is Visible Yet, Because Drawing Them Is a Separate Job With Its Own Rules and Its Own Surprising Billopening onlyHow placed boxes become coloured pixels, the order that decides what covers what, the small list of properties that put part of the page on its own sheet, and what that sheet costs.
06Everything So Far Described Drawing the Page Once, and the Page Is Drawn Again Sixty Times a Second, Which Changes Which Mistakes Matteropening onlyThe repeating loop that redraws a live page, the three classes every change falls into, how much of the pipeline each one re-enters, and the budget all of it has to fit inside.
07You Reached for a Link and the Page Moved and You Pressed Something Else, and the Reason Is That the Browser Was Never Told How Big a Picture Wasopening onlyContent that arrives after the page is already drawn changes geometry, geometry means layout, and layout means everything already placed moves. The causes are a short list and so are the fixes.
08Parsing, Styling, Layout, Painting, Your Code and Every Press of a Button Take Turns on a Single Queue, and Whoever Is Holding It Is Holding Everythingopening onlyWhy a computation that takes 300 milliseconds freezes the page, what the two ways out actually are, and which parts of the work can be moved and which genuinely cannot.