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. 3.
  2. 4.
  3. 14.

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

    bold; } span { display: none; } CSSOM CSS Object Model
  4. 15.
  5. 18.
  6. 19.
  7. 23.
  8. 24.
  9. 26.
  10. 27.
  11. 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
  12. 32.
  13. 33.
  14. 38.

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

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

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

    Ϋϥε/ελΠϧͷมߋ ͜ͷཁૉΛมߋ͍ͨ͠
  16. 44.
  17. 45.
  18. 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';
  19. 49.
  20. 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';
  21. 54.
  22. 56.
  23. 57.
  24. 59.
  25. 65.
  26. 70.
  27. 72.
  28. 74.
  29. 76.
  30. 78.
  31. 79.
  32. 80.
  33. 85.
  34. 87.
  35. 88.
  36. 98.
  37. 99.
  38. 102.
  39. 103.
  40. 109.
  41. 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