Performance in CSS

32f242f75b63e7174b493446de54a6b8?s=47 Yuya Saito
September 09, 2014

Performance in CSS

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

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

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

32f242f75b63e7174b493446de54a6b8?s=128

Yuya Saito

September 09, 2014
Tweet

Transcript

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

    @ hikalab
  2. UX Engineer @ Yuya Saito

  3. None
  4. None
  5. #perfmatters

  6. Rendering Performance on CSS

  7. Jank: What is it?

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

  9. Parallax!!

  10. Frame = 16.666666666666666ms 60FPS

  11. How Browser Render Pixel

  12. Recalculate Style

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

  14. <html> <head> <body> <p> <span> Hello World p { font-weight:

    bold; } span { display: none; } CSSOM CSS Object Model
  15. Layout

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

  17. <html> <body> <article> <h1> <p> <button> DOM + CSSOM =

    Render Tree
  18. None
  19. Paint

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

  21. <html> <body> <article> 1> <p> <button>

  22. Layout Paint

  23. Composite

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

  26. None
  27. None
  28. GPU Graphical Processing Unit

  29. Tools, Not Rules

  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
  31. “ Tools, Not Rules — Paul Lewis

  32. None
  33. None
  34. chrome://flags/#enable-devtools-experiments

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

  36. Paint is Very Expensive

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

  38. <div> <ul> <li> <header> <div> <footer> <h3> <a> <p> <a>

    Ϋϥεͷมߋ ͜ͷཁૉΛมߋ͍ͨ͠
  39. <div> <ul> <li> <header> <div> <footer> <h3> <a> <p> <a>

    Ϋϥεͷมߋ
  40. How to solve it? ճආ

  41. <div> <ul> <li> <header> <div> <footer> <h3> <a> <p> <a>

    Ϋϥε/ελΠϧͷมߋ ͜ͷཁૉΛมߋ͍ͨ͠
  42. <div> <ul> <li> <header> <div> <footer> <h3> <a> <p> <a>

  43. How to measure it? ܭଌ

  44. None
  45. None
  46. Layout Thrashing

  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';
  48. How to measure it? ܭଌ

  49. None
  50. Forced Synchronous Layout

  51. How to solve it? ճආ

  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';
  53. by Wilson Page git.io/KdTJYw fastdom

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

  56. None
  57. None
  58. How to measure it? ܭଌ

  59. None
  60. How to solve it? ճආ

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

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

  63. will-change: animateable-feature

  64. by Sara Soueidan bit.ly/WyKbT7 Everything You Need to Know About

    the CSS will-change Property
  65. None
  66. -webkit-transform: translateZ(0);

  67. will-change: left, top;

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

  69. by Joel Besada bouncejs.com Bounce.js

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

  72. None
  73. Paint Storms

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

  76. None
  77. ৭Λมߋ

  78. Paint!?

  79. None
  80. None
  81. device-pixel-ratio = 1

  82. positionFixed͕ͳ͍

  83. How to measure it? ܭଌ

  84. Show paint rectangles

  85. None
  86. Experiments: Paint Profiler

  87. None
  88. None
  89. How to solve it? ճආ

  90. Don't Paint

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

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

  93. ʰߴՁͳʱϖΠϯτ

  94. box-shadow border-radius gradient

  95. Resize Images

  96. Paint affects not only Animation but also Scrolling

  97. How to measure it? ܭଌ

  98. None
  99. None
  100. Image Resize is missing?

  101. How to solve it? ճආ

  102. None
  103. CTRL + H

  104. Images in Performance

  105. Images are 1MB in 1.7MB

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

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

  108. by Andreas Bovens bit.ly/1wdgML0 Responsive Images: Use Cases and Documented

    Code Snippets to Get You Started
  109. In Closing

  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
  111. When: The Hardest Question

  112. Thank You! @cssradar