Everything So Far Described Drawing the Page Once, and the Page Is Drawn Again Sixty Times a Second, Which Changes Which Mistakes Matter
Last timePainting, and in What Order
The 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.
The loop
Five lessons have described building a page once. A live page is rebuilt
continuously: a scroll, a hover, a timer, a response arriving, an animation
step. Each of those can change something, and the browser has to produce a new
image in time for the next refresh of the display.
The three classes
Every change falls into one of three classes, and the class is determined by
which property changed.
| needs layout | needs paint | needs assembly | stages re-entered | |
|---|---|---|---|---|
| changing a width or a he | 1 | 1 | 1 | 3 |
| adding or removing an el | 1 | 1 | 1 | 3 |
| changing the text inside | 1 | 1 | 1 | 3 |
| changing a background co | 0 | 1 | 1 | 2 |
| changing a border colour | 0 | 1 | 1 | 2 |
| changing a shadow | 0 | 1 | 1 | 2 |
| a transform on a promote | 0 | 0 | 1 | 1 |
| an opacity change on a p | 0 | 0 | 1 | 1 |
The middle class is more expensive than it looks, because of how far a repaint
spreads. Changing the background colour of one element means redrawing the
region that element occupies, and a region is redrawn as a whole, so everything
that overlaps it is redrawn too. A colour change on a small element behind a
large image can cost more than a colour change on a large element over a flat
ground.
The lesson stops here
3 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 contentsThis 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