ContentsThe library

How a Browser Draws a Page

Parsing, Styling, Layout, Painting, Your Code and Every Press of a Button Take Turns on a Single Queue, and Whoever Is Holding It Is Holding Everything

Last timeWhy the Page Jumps

Why 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.

What shares the queue

Seven lessons have described separate machinery: a parser, a style resolver, a

layout pass, a painter, a compositor, your own code. They are not separate in

the way the lessons made them sound. Almost all of it runs on one thread, in

one queue, one item at a time, and each item runs to completion before the next

one starts.

That rule is the whole lesson. There is no interrupting. A task that has

started will finish before anything else happens, including the handling of a

press that arrived while it was running, including the production of the next

frame.

FIG 1One queue, everything in it
Follow the loop from any of the four entry points at the bottom. Every one of them leads into the same single queue, and the only place rendering happens is between tasks, which means the length of the longest task is the limit on how responsive the page can possibly be.

Some work genuinely does happen elsewhere. Painting and assembly can run on

other threads, image decoding usually does, and a separate process is often

doing the networking. But styling, layout, and all of your own code run in the

one place, so those are the ones that can block everything.

How a freeze happens

Consider a function that takes three hundred milliseconds. Perhaps it is

sorting ten thousand rows, or parsing a large response, or computing a layout

of its own in code.

The lesson stops here

4 more paragraphs to go

You have read the opening. The rest of the argument, the problems that check whether it landed, and the lines worth keeping at the end all come with a plan.

The first lesson of every course in the library reads the whole way through, free, so you can see exactly what the rest of them are.

See the planThe contents

This is the reading half

Starting the course gives you your own copy of it. Every idea on every page has problems standing under it, marked with a reason rather than a tick, and any sentence you do not believe can be opened and argued with. None of that can happen on a page nobody owns.

The contents

The rest of this course

  1. 01The Browser Starts Building the Page Before It Has Finished Reading It, and One Tag in the Wrong Place Stops the Whole Production Line
  2. 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 only
  3. 03Four Things Stand Between a Document Arriving and Anything Appearing, and Only One of Them Is Usually the Reason Your Page Is Slowopening only
  4. 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 only
  5. 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 only
  6. 06Everything So Far Described Drawing the Page Once, and the Page Is Drawn Again Sixty Times a Second, Which Changes Which Mistakes Matteropening only
  7. 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 only
  8. 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 Everythingyou are here

Read alongside