My Notes

N.B. Speaker is a Mozilla developer. Notes may not apply across all browsers. Also note this speaker should have practiced his talk a few times. His awkwardness and stumbling is the worst of the google tech talks that I’ve seen.

The frame / rendering tree composed of rendedered elements, viewport, scroll bars, etc.

Order: content -> compute style -> construct frames -> layout -> paint

Style sheets affect rendering tree (visual representation), not DOM tree (structure)

Right most selector should be as specific as necessary but no more

position : fixed very inefficient b/c can not simply shift up rendered doc and repaint diff

:hover should be lmited b/c will cause repaint on every mouse move

The cost of reflow can vary by ancestors e.g. elements that are children of floats will cause recalculations to find parents’ state

display: none incurs repaint cost once but then no additional costs thereafter

visibility: hidden avoids initial painting cost but still incurs layout cost on every change b/c visibility can be overridden, so a visible child of a invisible parent must be poisitioned

Absolutely positioned elements within (relative or absolutely) positioned elements have additional cost