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.

Transcript

1. Case study in making animations not suck
2. Mike Herchel Front-end Developer at Lullabot @mikeherchel
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; }
17. Compositing Layers Graphic(s) from http://www.chromium.org
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?