Layout in Gecko

David Baron, Mozilla

The Pipeline from Markup to Graphics


><title>Web page parsing</title></head
  ><h1>Web page parsing</h1
  ><p>This is an example Web page.</p
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..."


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:tablensTableOuterFrame and nsTableFrame
display:block; overflow:autonsGfxScrollFrame and nsBlockFrame
float:left or position:absolute or ...nsPlaceholderFrame and nsBlockFrame

The Pipeline from Markup to Graphics


Redo everything for any DOM/style change
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


  • 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


  • 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


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


This talk
Other links
window.requestAnimationFrame for hooking in to the browser's refresh cycle, for making sites load quickly