Performance in CSS

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

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

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

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