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 Slide

  2. UX Engineer @
    Yuya Saito

    View Slide

  3. View Slide

  4. View Slide

  5. #perfmatters

    View Slide

  6. Rendering
    Performance
    on CSS

    View Slide

  7. Jank: What is it?

    View Slide

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

    View Slide

  9. Parallax!!

    View Slide

  10. Frame = 16.666666666666666ms
    60FPS

    View Slide

  11. How Browser Render Pixel

    View Slide

  12. Recalculate Style

    View Slide

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

    View Slide





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

    View Slide

  15. Layout

    View Slide

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

    View Slide





  17. DOM + CSSOM = Render Tree

    View Slide

  18. View Slide

  19. Paint

    View Slide

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

    View Slide




  21. 1>

    View Slide

  22. Layout Paint

    View Slide

  23. Composite

    View Slide

  24. View Slide

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

    View Slide

  26. View Slide

  27. View Slide

  28. GPU
    Graphical Processing Unit

    View Slide

  29. Tools, Not Rules

    View Slide


  30. 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 Slide


  31. Tools, Not Rules
    — Paul Lewis

    View Slide

  32. View Slide

  33. View Slide

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

    View Slide


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

    View Slide

  36. Paint is Very Expensive

    View Slide

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

    View Slide








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

    View Slide








  39. Ϋϥεͷมߋ

    View Slide

  40. How to solve it?
    ճආ

    View Slide








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

    View Slide








  42. View Slide

  43. How to measure it?
    ܭଌ

    View Slide

  44. View Slide

  45. View Slide

  46. Layout Thrashing

    View Slide

  47. // 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 Slide

  48. How to measure it?
    ܭଌ

    View Slide

  49. View Slide

  50. Forced Synchronous Layout

    View Slide

  51. How to solve it?
    ճආ

    View Slide

  52. // 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 Slide

  53. by Wilson Page
    git.io/KdTJYw
    fastdom

    View Slide

  54. View Slide

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

    View Slide

  56. View Slide

  57. View Slide

  58. How to measure it?
    ܭଌ

    View Slide

  59. View Slide

  60. How to solve it?
    ճආ

    View Slide

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

    View Slide

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

    View Slide

  63. will-change: animateable-feature

    View Slide

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

    View Slide

  65. View Slide

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

    View Slide

  67. will-change: left, top;

    View Slide

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

    View Slide

  69. by Joel Besada
    bouncejs.com
    Bounce.js

    View Slide

  70. View Slide

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

    View Slide

  72. View Slide

  73. Paint Storms

    View Slide

  74. View Slide

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

    View Slide

  76. View Slide

  77. ৭Λมߋ

    View Slide

  78. Paint!?

    View Slide

  79. View Slide

  80. View Slide

  81. device-pixel-ratio = 1

    View Slide

  82. positionFixed͕ͳ͍

    View Slide

  83. How to measure it?
    ܭଌ

    View Slide

  84. Show paint rectangles

    View Slide

  85. View Slide

  86. Experiments: Paint Profiler

    View Slide

  87. View Slide

  88. View Slide

  89. How to solve it?
    ճආ

    View Slide

  90. Don't Paint

    View Slide

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

    View Slide

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

    View Slide

  93. ʰߴՁͳʱϖΠϯτ

    View Slide

  94. box-shadow
    border-radius
    gradient

    View Slide

  95. Resize Images

    View Slide

  96. Paint affects
    not only Animation but also
    Scrolling

    View Slide

  97. How to measure it?
    ܭଌ

    View Slide

  98. View Slide

  99. View Slide

  100. Image Resize
    is missing?

    View Slide

  101. How to solve it?
    ճආ

    View Slide

  102. View Slide

  103. CTRL + H

    View Slide

  104. Images in Performance

    View Slide

  105. Images are 1MB in 1.7MB

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  109. In Closing

    View Slide


  110. 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 Slide

  111. When: The Hardest Question

    View Slide

  112. Thank You!
    @cssradar

    View Slide