How Chrome’s Blink
Renders the Web

Elliott Sprehn - Software Engineer, Google

About Me

  • Rendering, layout and DOM APIs
  • requestAutocomplete()
  • Google Feedback screenshots
    • HTML rendering in JS

Some parts of your browser

Connecting the dots

HTML parsing (1): Tokenizing

HTML parsing (2): Tree building

The future of parsing

  • Tokenize on a background thread
  • Tree build on the main thread
  • Speculatively tokenize into the future

Tips

  • Only document.write balanced tags
  • Avoid causing style recalcs or layout

(Re)calculate style

  • Recursive traversal of the tree
  • Performs CSS selector matching
  • Builds the render tree

Making recalcStyle fast

  • Separate rule sets (ids, classes, tags, ...)
  • Bloom filter (fast rejection)
  • Style sharing

Style sharing

  • Allows skipping rule matching
  • Siblings and cousins can share style
  • Can share in most common cases
    • Mostly just works if you don't do anything crazy.

Example

  • Looks like

Tips

  • Don't stress, selectors are super fast!
  • Focus on scope of recalcs instead
  • Don't inject stylesheets

Render tree

  • Called box tree by CSS
  • Mostly 1:1 with the DOM tree
  • Usually based on CSS display
    • Special cases like <input>

Example render tree

Views of the render tree (1)

Views of the render tree (2)

Rendering

Layout

  1. Set the width
  2. Recursively layout children
  3. Set the (top, left) of each child
  4. Set the height

Line layout

Flexbox layout

The future of layout

Tips

  • Avoid synchronous layout
  • Use "layer" features sparingly
    • overflow, positioning, transforms, opacity
  • Use negative margin and padding sparingly

Painting

Compositing

Graphics Layer
Graphics Layer
Graphics Layer
Graphics Layer

The future of compositing

  • Move to its own thread
  • Threaded scrolling
  • More hardware acceleration

Tips

  • Don't assume onscroll is synchronous
  • Use CSS animations
  • Use transforms instead of resizing

Tools & Demos!

www.flickr.com/photos/rustybrick/5033927531/sizes/o/in/photostream/

Take the Survey!