Layout in Gecko

David Baron, Mozilla
http://dbaron.org/
@davidbaron
Slides: http://dbaron.org/talks/

The Pipeline from Markup to Graphics

Parsing

<html><head
><title>Web page parsing</title></head
><div
  ><h1>Web page parsing</h1
  ><p>This is an example Web page.</p
></div>
 		html head body title "Web p..." div h1 p "Web p..." "This..."

Content tree (DOM tree)

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

CSS

rule
selector { declarations }
.panel-content h3 { font-weight: bold; letter-spacing: -0.03em }

CSS Cascade

  • User-Agent (ua.css, html.css, forms.css, etc.)
  • User (preferences, userContent.css, addons)
  • Author (web page)

Two halves of the CSS code

  • Specified style
  • Computed style

Both halves of the code are in layout/style/.

The Pipeline from Markup to Graphics

The Layout part of the pipeline

Content Compute style Construct frames Layout Paint Now shown separately

Frame tree (rendering tree)

Content Tree / DOM Tree 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

Layout debugger

Frame tree

display:nonenothing
display:blocknsBlockFrame
display:inlinensInlineFrame
display:tablensTableOuterFrame and nsTableFrame
display:block; overflow:autonsGfxScrollFrame and nsBlockFrame
float:left or position:absolute or ...nsPlaceholderFrame and nsBlockFrame

The Pipeline from Markup to Graphics

Optimization

Unoptimized
Redo everything for any DOM/style change
Optimizations
Skip entire steps
Skip part of a step
Coalesce changes
Unoptimized (alternative view)
Redo everything for every paint or request from script

Optimizations can and do change

Layout

  • Style computation
  • Frame construction
  • Reflow
  • Painting

Style Computation

  • layout/style/
  • Implements CSS up to the computed value
  • But CSS also defines behavior for properties, not just computed values

Frame construction

  • layout/base/nsCSSFrameConstructor.cpp
  • layout/base/nsFrameManager.cpp
  • Create style context, then create frame
  • Manage dynamic changes

Reflow

  • Compute positions of frames
    • every frame has a rect
  • intrinsic width computation is separate
  • Part of the frame classes (layout/generic/, etc.)

Intrinsic sizes

preferred width

Intrinsic sizes

minimum width

Painting

  • layers and display lists
  • Display lists:
    • nsIFrame::BuildDisplayList
    • Also used for event targeting

Thanks

This talk
http://dbaron.org/talks/
Other links
window.requestAnimationFrame for hooking in to the browser's refresh cycle
http://stevesouders.com/, for making sites load quickly