Redo everything for any DOM/style change
Skip entire steps
Skip part of a step
Optimizations can and do change
Browsers can check whether there are selectors that care about this
attribute, and as a result not even compute style.
Now there are selectors, so we have to rerun selector matching. But
if the div isn't inside an element with id="list", nothing
Now the rerunning of selector matching actually makes a new rule
match that didn't before.
Authors might change the same element twice
Authors might make changes where the work needed to handle one subsumes the work for the other
Browsers don't actually process the changes until:
It's time to redraw
Script asks for something (e.g., style, positions, sizes) that requires processing them
Reconstructing a frame implies reconstructing all its descendants
There's a tiny cost resulting from the depth of the tree it's in
Otherwise cost is mostly proportional to the number of boxes / frames / rendering objects constructed
When layout of one element changes, it can move others around
Reflow / re-layout runs from the top of the tree down to the things it needs to change
intrinsic width computation a separate issue
Some properties force relayout of all descendants; some don't
So cost of layout depends on surroundings
Experiment with surroundings.
Repainting an area is about painting a rectangle.
Harder to measure because browser controls refresh rate
Some ways to spot very bad cases, but vary based on OS and browser