Case study in making animations not suck 

Mike Herchel Front-end Developer at Lullabot @mikeherchel 

No content

Organization 1. Walk through
 2. How the browser renders webpages
 3. Front-end profiling tools
 4. Real-world applications 

[Demo Time] Let’s check out www.Syfy.com 

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

Browser Rendering 1. Document Object Model 2. CSS Object Model 3. Render Tree & Layout 4. Painting 5. Compositing 

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

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

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

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 

Layout Thrashing Examples from http://wilsonpage.co.uk/preventing-layout-thrashing 

What doesn’t cause layout? 

CSS Transforms! 

Promote transform elements to own layer .my-awesome-div { will-change: transform, opacity; backface-visibility: hidden; } 

No content

Compositing Layers Graphic(s) from http://www.chromium.org 

No content

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 

Profiling the front-end through Chrome DevTools (demo!) [Part 3] 

In action [Part 4] 

Don’t fight yourself! 

Don’t fight yourself! (pt 2) 

[Live Demos] 

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/ 

Thanks! Give me feedback at @mikeherchel Questions?