レンダリングを意識したパフォーマンスチューニング

14,250 views

Published on

TalkNote Vol.8「TalkNote × Frontrend」 -(2013年6月8日開催)で使用したスライドです。

Webページを遅くしているボトルネックの1つは、レンダリングです。
昨今、フロントエンドにおけるパフォーマンスの最適化はレンダリングの話題にシフトしつつあります。
特に非力なデバイスでは、ページロードやスクリプトの速度改善よりもレンダリングまわりの最適化に注力したほうが良い効果を得られるケースもあるでしょう。
問題になり得る事例を元に、いくつかのTipsをご紹介させていただきます。

Published in: Technology
0 Comments
96 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
14,250
On SlideShare
0
From Embeds
0
Number of Embeds
662
Actions
Shares
0
Downloads
0
Comments
0
Likes
96
Embeds 0
No embeds

No notes for slide

レンダリングを意識したパフォーマンスチューニング

  1. 1. TalkNote × Frontrendレンダリングを意識したパフォーマンスチューニング
  2. 2. @pocotan001Hayato Mizuno
  3. 3. なぜ最適化が必要か Webの閲覧時はあらかたレンダリングにコストをかけている(スクロール、他ユーザー操作など) ユーザーはOSとの感触が大きく違うものに違和感、またはストレスを感じる 時に過剰なバッテリー消費、画面のチラつきなどの二次災害を引き起こす
  4. 4. SETTINGS⚙開発ツールの準備Google Chrome Canary Safaridefaults write com.apple.Safari IncludeInternalDebugMenu 1@黒い画面(Macのみ)
  5. 5. SETTINGS⚙
  6. 6. }下2つあればおkSETTINGS⚙
  7. 7. ない場合は有効にチェック(あれば 規定で)SETTINGS⚙ about:flags
  8. 8. REFLOWPAINTCSS ANIMATION
  9. 9. REFLOW
  10. 10. REFLOW http://inception-explained.com/
  11. 11. paintHTMLDOMCSSOMCSSレンダーツリー視覚部分を表すツリーREFLOW
  12. 12. REFLOW http://www.youtube.com/watch?v=ILvF25ljaoM/
  13. 13. htmlhead bodytitle h1 p[text node] [text node] [text node]REFLOWDOMツリー
  14. 14. display:blockroothead bodytitle h1[text line] [text line]ツリーに挿入されない要素REFLOWレンダーツリーp[text line]
  15. 15. roothead bodytitle h1[text line] [text line]位置やサイズの変更を伴う → リフローありdisplay:noneREFLOWツリーに挿入されない要素レンダーツリーp[text line]
  16. 16. visibility: visibleroothead bodytitle h1[text line] [text line]p[text line]REFLOWツリーに挿入されない要素レンダーツリー
  17. 17. rootbodyh1[text line]p[text line]visibility: hidden位置やサイズの変更を伴わない → リフローなしREFLOWツリーに挿入されない要素レンダーツリーheadtitle[text line]
  18. 18. Debug > Show Render TreeREFLOW
  19. 19. REFLOW Debug > Show Render Tree
  20. 20. $(p).css(margin, 5px)$(p).css(margin, 5px)REFLOWリフローx2?
  21. 21. 1 位置変更がないためREFLOW
  22. 22. $(p).css(margin, 5px).css(padding, 5px).css(top, 5px).css(left, 5px);REFLOWリフローx4?
  23. 23. 1 可能な限り収束されるREFLOW
  24. 24. REFLOWリフロー? display visibility color border border-radius
  25. 25. REFLOWリフロー? display visibility color border border-radiusリフローなしリフローなしリフローなし
  26. 26. REFLOWリフローのトリガーhttp://kellegous.com/j/2013/01/26/layout-performance/ スタイルの変更css(), addClass(), show(), animate() ... DOMノードの変更html(), text(), append(), focus() ... 特定のプロパティの取得offset(), position() ... レイアウト変更の原因となる操作ウィンドウサイズの変更, スクロール, テキストの入力 ...
  27. 27. $(<p>test</p>).appendTo(body).hide();生成時に色々と追加が必要なケースREFLOWExample 1
  28. 28. $(<p>test</p>).hide().appendTo(body);描画する前に行うREFLOWExample 1
  29. 29. BeforeREFLOWExample 1
  30. 30. AfterREFLOWExample 1
  31. 31. $(<img src="200x100.jpg">).appendTo(body);imgを生成するケースREFLOWExample 2
  32. 32. $(<img src="200x100.jpg" width="200"height="150">).appendTo(body);描画の領域を明示しておくREFLOWExample 2
  33. 33. BeforeREFLOWExample 2
  34. 34. AfterREFLOWExample 2
  35. 35. $(p).css(top, $target.offset().top).css(left, $target.offset().left);複数回に分けて実行されるcss()REFLOWExample 3
  36. 36. $(p).css({top: $target.offset().top,left: $target.offset().left});1回のcss()にまとめるREFLOWExample 3
  37. 37. $(p).css({top: $target.offset().top,left: $target.offset().left});リフローが必要な取得系メソッドREFLOWExample 3
  38. 38. var offset = $target.offset();$(p).css({top: offset.top,left: offset.left});可能ならキャッシュして使い回すREFLOWExample 3
  39. 39. BeforeREFLOWExample 3
  40. 40. AfterREFLOWExample 3
  41. 41. <script src="jquery.js"></script><script src="jquery-ui.js"></script><script>$(function(){ $(#target).accordion(...); });</script></body>UI表示後にスタイルを変更するケースREFLOWExample 4
  42. 42. 表示 JS 変更REFLOWExample 4
  43. 43. <script src="jquery.js"></script><script src="jquery-ui.js"></script><script>$(function(){ $(#target).accordion(...); });</script></head><head> に移す、またはstyle付けはCSSでやるREFLOWExample 4
  44. 44. JS 表示&更新REFLOWExample 4
  45. 45. REFLOW影響する要素を減らす アニメーションは固定配置で行う スタイルは出来るだけ末端要素で行う テーブルレイアウトを避ける
  46. 46. REFLOW http://mir.aculo.us/dom-monster/
  47. 47. REFLOW http://mir.aculo.us/dom-monster/
  48. 48. PAINT
  49. 49. PAINT http://ut.uniqlo.com/
  50. 50. PAINTリペイントのトリガー スタイルの変化による画面の更新:hover, :active, アニメーション ... 同位置にとどまる系position: fixed, background-attachment: fixed ... 画面更新の原因となる操作ウィンドウサイズの変更, スクロール, テキストの入力 ...
  51. 51. 特にペイントに時間のかかるものhttp://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/PAINT値や組み合わせによってはより高コスト color: rgba() opacity background: linear-gradient() border-radius text-shadow ... etc
  52. 52. http://codepen.io/pocotan001/full/weJDHPAINT
  53. 53. http://codepen.io/pocotan001/full/weJDHPAINT
  54. 54. PAINT1-5を繰り返し1. 「Timeline」であたりを付ける2. 「continuous page repainting」をチェック3. `H`ショートカットを使い要素を特定4. ネックになっているスタイルを特定5. そのスタイルが必要かどうかを検討
  55. 55. PAINTFirst paintvar fp = chrome.loadTimes().firstPaintTime -chrome.loadTimes().startLoadTime;console.log(First paint: + fp);http://goo.gl/H1JfA
  56. 56. CSS ANIMATION
  57. 57. http://frames-per-second.appspot.com/CSS ANIMATION
  58. 58. CSS ANIMATIONGPUハック (null transform hack) -webkit-transform: translateZ(0) -webkit-transform: translate3d(0,0,0) -webkit-transform: preserve-3d; -webkit-backface-visibility: hidden; ...etc
  59. 59. CSS ANIMATIONGPUハック (null transform hack) -webkit-transform: translateZ(0) -webkit-transform: translate3d(0,0,0) -webkit-transform: preserve-3d; -webkit-backface-visibility: hidden; ...etc_:(´ཀ`」 ∠):_
  60. 60. http://intely.jp/CSS ANIMATION
  61. 61. http://codepen.io/pocotan001/full/ihvcFCSS ANIMATION
  62. 62. http://codepen.io/pocotan001/full/ihvcFCSS ANIMATION
  63. 63. http://codepen.io/ariya/full/xuwgyCSS ANIMATION
  64. 64. http://leaverou.github.io/animatable/CSS ANIMATION
  65. 65. http://andrew-hoyer.com/experiments/clock/CSS ANIMATION
  66. 66. http://mrdoob.github.io/three.js/examples/css3d_periodictable.htmlCSS ANIMATION
  67. 67. http://dev.sencha.com/animator/demos/redridinghood/CSS ANIMATION
  68. 68. http://tympanus.net/Development/ImageTransitions/index.htmlCSS ANIMATION
  69. 69. http://jsbin.com/efirip/5CSS ANIMATION
  70. 70. CSS ANIMATIONまとめ 目安は30fps 動く部分のみ composited layer として分離する 不要なテクスチャのアップロードを見つける
  71. 71. TalkNote × FrontrendThank you

×