Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    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