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.

96152416ecb494209fa7ff4edf0cde31?s=128

Michael Herchel

April 11, 2015
Tweet

Transcript

  1. 3.
  2. 4.

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


    3. Front-end profiling tools
 4. Real-world applications
  3. 7.

    Browser Rendering 1. Document Object Model 2. CSS Object Model

    3. Render Tree & Layout 4. Painting 5. Compositing
  4. 11.

    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
  5. 16.
  6. 18.
  7. 19.

    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
  8. 25.

    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/