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

Performance in CSS

Yuya Saito
September 09, 2014

Performance in CSS

これまでパフォーマンスと言ったら、どちらかというとネットワーク、いわゆるページの読み込み速度の改善にフォーカスして来ていると思います。

もちろん、かけるコストに対して最もリターンが大きいのがネットワーク・パフォーマンスの改善です。

今回はCSSなトピックで話をしていく勉強会ということもあり、そろそろ次のステップを見据えて準備運動を始めてもいいだろうと思う頃、と勝手に判断して、CSSにまつわるレンダリング・パフォーマンスにフォーカスしてお話していきます。

Yuya Saito

September 09, 2014
Tweet

More Decks by Yuya Saito

Other Decks in Programming

Transcript

  1. Performance in
    by Yuya Saito / Rich Media
    CSS
    2014.09.09 @ hikalab

    View full-size slide

  2. UX Engineer @
    Yuya Saito

    View full-size slide

  3. #perfmatters

    View full-size slide

  4. Rendering
    Performance
    on CSS

    View full-size slide

  5. Jank: What is it?

    View full-size slide

  6. εΫϩʔϧͷࡍʹͳΜ͔Ҿ͔͔ͬΔ
    Ξχϝʔγϣϯ͕ΧΫΧΫͯ͠͠·͏

    View full-size slide

  7. Frame = 16.666666666666666ms
    60FPS

    View full-size slide

  8. How Browser Render Pixel

    View full-size slide

  9. Recalculate Style

    View full-size slide

  10. ͦΕ΄ͲେมͳλεΫͰ͸ͳ͍
    ϒϥ΢βʹͱͬͯ

    View full-size slide





  11. Hello
    World
    p { font-weight: bold; }
    span { display: none; }
    CSSOM
    CSS Object Model

    View full-size slide

  12. গʑ໽հͳ΋ͷ
    ϒϥ΢βʹͱͬͯ

    View full-size slide





  13. DOM + CSSOM = Render Tree

    View full-size slide

  14. ࠷΋ෛՙ͕͔͔Δϓϩηε
    ϒϥ΢βʹͱͬͯ

    View full-size slide

  15. Layout Paint

    View full-size slide

  16. Ұ୴ফͯ͠ɺࠨʹ10ηϯνͣΒͯ͠ॻ͖௚͢

    View full-size slide

  17. GPU
    Graphical Processing Unit

    View full-size slide

  18. Tools, Not Rules

    View full-size slide


  19. For the most part we’ll be trying to get to
    60fps in our work,
    and that normally means understanding
    what the browser’s doing and optimizing
    for it.
    — Paul Lewis

    View full-size slide


  20. Tools, Not Rules
    — Paul Lewis

    View full-size slide

  21. chrome://flags/#enable-devtools-experiments

    View full-size slide


  22. You can't optimize
    what you can't measure.
    — Anonymous

    View full-size slide

  23. Paint is Very Expensive

    View full-size slide

  24. େ͖ͳΤϦΞͷϨΠΞ΢τɺελΠϧແޮԽ

    View full-size slide








  25. Ϋϥεͷมߋ
    ͜ͷཁૉΛมߋ͍ͨ͠

    View full-size slide








  26. Ϋϥεͷมߋ

    View full-size slide

  27. How to solve it?
    ճආ

    View full-size slide








  28. Ϋϥε/ελΠϧͷมߋ
    ͜ͷཁૉΛมߋ͍ͨ͠

    View full-size slide

  29. How to measure it?
    ܭଌ

    View full-size slide

  30. Layout Thrashing

    View full-size slide

  31. // Read
    var h1 = element1.clientHeight;
    !
    // Write (invalidates layout)
    element1.style.height = (h1 * 2) + 'px';
    !
    // Read (triggers layout)
    var h2 = element2.clientHeight;
    !
    // Write (invalidates layout)
    element2.style.height = (h2 * 2) + 'px';
    !
    // Read (triggers layout)
    var h3 = element3.clientHeight;
    !
    // Write (invalidates layout)
    element3.style.height = (h3 * 2) + 'px';

    View full-size slide

  32. How to measure it?
    ܭଌ

    View full-size slide

  33. Forced Synchronous Layout

    View full-size slide

  34. How to solve it?
    ճආ

    View full-size slide

  35. // Read
    var h1 = element1.clientHeight;
    var h2 = element2.clientHeight;
    var h3 = element3.clientHeight;
    !
    // Write (invalidates layout)
    element1.style.height = (h1 * 2) + 'px';
    element2.style.height = (h2 * 2) + 'px';
    element3.style.height = (h3 * 2) + 'px';

    View full-size slide

  36. by Wilson Page
    git.io/KdTJYw
    fastdom

    View full-size slide

  37. ϨΠΞ΢τɾϓϩύςΟͷΞχϝʔγϣϯ

    View full-size slide

  38. How to measure it?
    ܭଌ

    View full-size slide

  39. How to solve it?
    ճආ

    View full-size slide

  40. www.html5rocks.com/en/tutorials/speed/high-performance-animations

    View full-size slide

  41. -webkit-transform: translateZ(0);

    View full-size slide

  42. will-change: animateable-feature

    View full-size slide

  43. by Sara Soueidan
    bit.ly/WyKbT7
    Everything You Need to Know About
    the CSS will-change Property

    View full-size slide

  44. -webkit-transform: translateZ(0);

    View full-size slide

  45. will-change: left, top;

    View full-size slide

  46. by Paul Lewis
    csstriggers.com
    CSS TRIGGERS...

    View full-size slide

  47. by Joel Besada
    bouncejs.com
    Bounce.js

    View full-size slide

  48. by Julian Shapiro
    julian.com/research/velocity
    Velocity.js

    View full-size slide

  49. Paint Storms

    View full-size slide

  50. Changing
    visual properties of an element
    will trigger a paint.

    View full-size slide

  51. device-pixel-ratio = 1

    View full-size slide

  52. positionFixed͕ͳ͍

    View full-size slide

  53. How to measure it?
    ܭଌ

    View full-size slide

  54. Show paint rectangles

    View full-size slide

  55. Experiments: Paint Profiler

    View full-size slide

  56. How to solve it?
    ճආ

    View full-size slide

  57. www.html5rocks.com/en/tutorials/speed/high-performance-animations

    View full-size slide

  58. -webkit-transform: translateZ(0);
    position: fixed;

    View full-size slide

  59. ʰߴՁͳʱϖΠϯτ

    View full-size slide

  60. box-shadow
    border-radius
    gradient

    View full-size slide

  61. Resize Images

    View full-size slide

  62. Paint affects
    not only Animation but also
    Scrolling

    View full-size slide

  63. How to measure it?
    ܭଌ

    View full-size slide

  64. Image Resize
    is missing?

    View full-size slide

  65. How to solve it?
    ճආ

    View full-size slide

  66. Images in Performance

    View full-size slide

  67. Images are 1MB in 1.7MB

    View full-size slide

  68. ߴղ૾౓σΟεϓϨΠ

    View full-size slide

  69. by RICG
    The picture Element
    picture.responsiveimages.org

    View full-size slide

  70. by Andreas Bovens
    bit.ly/1wdgML0
    Responsive Images: Use Cases and
    Documented Code Snippets to
    Get You Started

    View full-size slide


  71. To me, performance is a feature […].
    I think there’s also a lesson to be learned
    here about the competitive landscape of
    the public internet, where there are two
    kinds of websites: the quick and the dead.
    — Jeff Atwood, Coding Horror

    View full-size slide

  72. When: The Hardest Question

    View full-size slide

  73. Thank You!
    @cssradar

    View full-size slide