Faster HTML & CSS

L. David Baron

Mozilla Corporation

dbaron@dbaron.org

Wednesday, November 12, 2008, 14:00 PST

Google Building 42, Mountain View, CA

Slides

Available at http://dbaron.org/talks/

Content tree (DOM tree)

html head body title "Web p..." div h1 p "Web p..." "This..."

Content tree (DOM tree)

svg line g ellipse text "This..."

Content tree (DOM tree)

html head body title "Web p..." div h1 "Web p..." svg line g ellipse text "This..."

Frame tree (rendering tree)

Document html head body title "Web p..." div h1 p "Web p..." "This..." Viewport Scroll Block Block Block Block Block Text Text

From DOM to screen

Content Compute style Construct frames Layout Paint

CSS selector matching

... body div div id="sidebar" div class="item" div class="item" div class="item" p p p div .item #sidebar div#sidebar div p ul p ul > p body > div p #sidebar p :hover .item :hover

Dynamic changes

Content Compute style Construct frames Layout Paint

Incremental reflow (re-layout)

Diagram: Chris Waterson

Incremental reflow (re-layout)

Diagram: Chris Waterson