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. Case study in making animations not suck

  2. Mike Herchel Front-end Developer at Lullabot @mikeherchel

  3. None
  4. Organization 1. Walk through
 2. How the browser renders webpages


    3. Front-end profiling tools
 4. Real-world applications
  5. [Demo Time] Let’s check out www.Syfy.com

  6. [Part 2] How browsers render content (a quickie)

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

    3. Render Tree & Layout 4. Painting 5. Compositing
  8. Document Object Model Graphic(s) from https://developers.google.com

  9. CSS Object Model Graphic(s) from https://developers.google.com

  10. The Render Tree & Layout Graphic(s) from https://developers.google.com

  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
  12. Layout Thrashing Examples from http://wilsonpage.co.uk/preventing-layout-thrashing

  13. What doesn’t cause layout?

  14. CSS Transforms!

  15. Promote transform elements to own layer .my-awesome-div { will-change: transform,

    opacity; backface-visibility: hidden; }
  16. None
  17. Compositing Layers Graphic(s) from http://www.chromium.org

  18. None
  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
  20. Profiling the front-end through Chrome DevTools (demo!) [Part 3]

  21. In action [Part 4]

  22. Don’t fight yourself!

  23. Don’t fight yourself! (pt 2)

  24. [Live Demos]

  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/
  26. Thanks! Give me feedback at @mikeherchel Questions?