The Boxes Are Placed and Nothing Is Visible Yet, Because Drawing Them Is a Separate Job With Its Own Rules and Its Own Surprising Bill
Last timeDeciding Where Everything Goes
How 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.
From boxes to pixels
Every box now has a position and a size, and the screen is still blank.
Painting is a separate job: deciding, for each pixel, what colour it is.
The browser does it in two stages, and the split matters. First it records what
to draw as a list of commands. Fill this rectangle with this colour. Stroke
this line. Draw this text at this baseline with this font. Then it executes the
list. Recording consults the box tree and the computed styles; executing does
not, which is why the same recorded list can be replayed at a different scale
or on a different thread without going anywhere near the tree.
Within one box the drawing happens in a fixed sequence.
| step | step | what is drawn | covers what came before | cost | what happened |
|---|---|---|---|---|---|
| 1 | 1 | background colour | nothing yet | one rectangle fill | The cheapest possible operation, and the reason a flat colour is almost free compared with anything else on this list. |
| 2 | 2 | background image | the colour | a scaled image draw | Scaling is the expensive part. An image drawn at other than its natural size is resampled, and a large image behind a small box pays for every source pixel. |
| 3 | 3 | border | the backgrounds at the edges | four edges, more if rounded | A rounded corner turns a straight edge into a curve that has to be smoothed, which is measurably more work than a square one. |
| 4 | 4 | the text and inline contents | everything above | one draw per run of text | Usually the dominant cost on a text-heavy page, and the reason a paint is roughly proportional to how much text is on screen. |
| 5 | 5 | anything positioned, in order | everything above | a repeat of this whole list | Children with a position of their own are painted after the entire normal content of this box, which is the root of the next section. |
What covers what
People reach for an explicit layering number and are surprised when it does
nothing. The reason is that the painting order has several levels and that
number only operates within one of them.
The order, simplified: the background of the root element, then everything with
no position of its own in document order, then floated boxes, then the inline
content, then positioned boxes sorted by their layering number, with document
order as the tie-break.
| first element positioned | second element positione | a layering number is set | which one appears on top | |
|---|---|---|---|---|
| both unpositioned, secon | 1 | 0 | 0 | 2 |
| one positioned, one not | 0 | 1 | 0 | 2 |
| both positioned, second | 1 | 1 | 1 | 1 |
| both positioned, same nu | 1 | 1 | 0 | 2 |
| one has a lower number b | 0 | 0 | 1 | 1 |
| one is transformed, the | 1 | 1 | 1 | 2 |
That last behaviour is the bridge to the rest of the lesson. A handful of
properties do not merely affect painting, they create a self-contained region
whose contents are sorted among themselves and then placed as a unit. And some
of those properties go further and move the region onto a surface of its own.
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 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