Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making Syfy.com's scroll interactions not suck

Making Syfy.com's scroll interactions not suck

A deep dive into browser rendering and google dev tools to make the scrolling animations on syfy.com buttery smooth.

Michael Herchel

April 11, 2015

More Decks by Michael Herchel

Other Decks in Technology


  1. Organization 1. Walk through
 2. How the browser renders webpages

    3. Front-end profiling tools
 4. Real-world applications
  2. Browser Rendering 1. Document Object Model 2. CSS Object Model

    3. Render Tree & Layout 4. Painting 5. Compositing
  3. Causes of Layout Invalidation (aka reflow) • Adding, removing, updating

    DOM nodes • Adding CSS classes • Height, width, margins, paddings, border-widths, display - basically anything that causes crap to get moved around the page. • Javascript Offsets also trigger a reflow because they they have to reconstruct the dom • Check out http://csstriggers.com
  4. tldr; ! 1. Be mindful of where you’re adding and

    removing classes 2. Use CSS Transforms instead of top, left, margins, etc 3. Promote layers when necessary
  5. Want to learn more? • DOM: https://developers.google.com/web/fundamentals/performance/ critical-rendering-path/constructing-the-object-model?hl=en • Render

    Tree & Layout:! • http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html • http://www.html5rocks.com/en/tutorials/speed/layers/ • http://wilsonpage.co.uk/preventing-layout-thrashing/ • Painting & Compositing! • https://developers.google.com/web/fundamentals/performance/ rendering/stick-to-compositor-only-properties-and-manage-layer- count?hl=en • http://www.html5rocks.com/en/tutorials/speed/layers/ • http://www.chromium.org/developers/design-documents/gpu- accelerated-compositing-in-chrome • General! • http://jankfree.org/ • http://aerotwist.com/blog/pixels-are-expensive/