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
   

   View Slide

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

   View Slide

3. View Slide

4. Organization
   1. Walk through

   2. How the browser renders webpages

   3. Front-end profiling tools

   4. Real-world applications
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

13. What doesn’t cause layout?
    

    View Slide

14. CSS Transforms!
    

    View Slide

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

    View Slide

16. View Slide

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

    View Slide

18. View Slide

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
    

    View Slide

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

    View Slide

21. In action
    [Part 4]
    

    View Slide

22. Don’t fight yourself!
    

    View Slide

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

    View Slide

24. [Live Demos]
    

    View Slide

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/
    

    View Slide

26. Thanks!
    Give me feedback at @mikeherchel
    Questions?
    

    View Slide