$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Michael Herchel

Other Decks in Technology

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?