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

1. TalkNote × Frontrendレンダリングを意識したパフォーマンスチューニング

2. @pocotan001Hayato Mizuno

3. なぜ最適化が必要か Webの閲覧時はあらかたレンダリングにコストをかけている（スクロール、他ユーザー操作など） ユーザーはOSとの感触が大きく違うものに違和感、またはストレスを感じる 時に過剰なバッテリー消費、画面のチラつきなどの二次災害を引き起こす

4. SETTINGS⚙開発ツールの準備Google Chrome Canary Safaridefaults write com.apple.Safari IncludeInternalDebugMenu 1@黒い画面（Macのみ）

5. SETTINGS⚙

6. }下2つあればおkSETTINGS⚙

7. ない場合は有効にチェック（あれば規定で）SETTINGS⚙ about:ﬂags

8. REFLOWPAINTCSS ANIMATION

9. REFLOW

10. REFLOW http://inception-explained.com/

11. paintHTMLDOMCSSOMCSSレンダーツリー視覚部分を表すツリーREFLOW

12. REFLOW http://www.youtube.com/watch?v=ILvF25ljaoM/

13. htmlhead bodytitle h1 p[text node] [text node] [text node]REFLOWDOMツリー

14. display:blockroothead bodytitle h1[text line] [text line]ツリーに挿入されない要素REFLOWレンダーツリーp[text line]

15. roothead bodytitle h1[text line] [text line]位置やサイズの変更を伴う → リフローありdisplay:noneREFLOWツリーに挿入されない要素レンダーツリーp[text line]

16. visibility: visibleroothead bodytitle h1[text line] [text line]p[text line]REFLOWツリーに挿入されない要素レンダーツリー

17. rootbodyh1[text line]p[text line]visibility: hidden位置やサイズの変更を伴わない → リフローなしREFLOWツリーに挿入されない要素レンダーツリーheadtitle[text line]

18. Debug > Show Render TreeREFLOW

19. REFLOW Debug > Show Render Tree

20. $(p).css(margin, 5px)$(p).css(margin, 5px)REFLOWリフローx2？

21. 1 位置変更がないためREFLOW

22. $(p).css(margin, 5px).css(padding, 5px).css(top, 5px).css(left, 5px);REFLOWリフローx4？

23. 1 可能な限り収束されるREFLOW

24. REFLOWリフロー？ display visibility color border border-radius

25. REFLOWリフロー？ display visibility color border border-radiusリフローなしリフローなしリフローなし

26. REFLOWリフローのトリガーhttp://kellegous.com/j/2013/01/26/layout-performance/ スタイルの変更css(), addClass(), show(), animate() ... DOMノードの変更html(), text(), append(), focus() ... 特定のプロパティの取得offset(), position() ... レイアウト変更の原因となる操作ウィンドウサイズの変更, スクロール, テキストの入力 ...

27. $(<p>test</p>).appendTo(body).hide();生成時に色々と追加が必要なケースREFLOWExample 1

28. $(<p>test</p>).hide().appendTo(body);描画する前に行うREFLOWExample 1

29. BeforeREFLOWExample 1

30. AfterREFLOWExample 1

31. $(<img src="200x100.jpg">).appendTo(body);imgを生成するケースREFLOWExample 2

32. $(<img src="200x100.jpg" width="200"height="150">).appendTo(body);描画の領域を明示しておくREFLOWExample 2

35. $(p).css(top, $target.offset().top).css(left, $target.offset().left);複数回に分けて実行されるcss()REFLOWExample 3

36. $(p).css({top: $target.offset().top,left: $target.offset().left});1回のcss()にまとめるREFLOWExample 3

37. $(p).css({top: $target.offset().top,left: $target.offset().left});リフローが必要な取得系メソッドREFLOWExample 3

38. var offset = $target.offset();$(p).css({top: offset.top,left: offset.left});可能ならキャッシュして使い回すREFLOWExample 3

41. <script src="jquery.js"></script><script src="jquery-ui.js"></script><script>$(function(){ $(#target).accordion(...); });</script></body>UI表示後にスタイルを変更するケースREFLOWExample 4

42. 表示 JS 変更REFLOWExample 4

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. JS 表示&更新REFLOWExample 4

45. REFLOW影響する要素を減らす アニメーションは固定配置で行う スタイルは出来るだけ末端要素で行う テーブルレイアウトを避ける

46. REFLOW http://mir.aculo.us/dom-monster/

47. REFLOW http://mir.aculo.us/dom-monster/

48. PAINT

49. PAINT http://ut.uniqlo.com/

50. PAINTリペイントのトリガー スタイルの変化による画面の更新:hover, :active, アニメーション ... 同位置にとどまる系position: ﬁxed, background-attachment: ﬁxed ... 画面更新の原因となる操作ウィンドウサイズの変更, スクロール, テキストの入力 ...

51. 特にペイントに時間のかかるものhttp://perfectionkills.com/proﬁling-css-for-fun-and-proﬁt-optimization-notes/PAINT値や組み合わせによってはより高コスト color: rgba() opacity background: linear-gradient() border-radius text-shadow ... etc

52. http://codepen.io/pocotan001/full/weJDHPAINT

53. http://codepen.io/pocotan001/full/weJDHPAINT

54. PAINT1-5を繰り返し1. 「Timeline」であたりを付ける2. 「continuous page repainting」をチェック3. `H`ショートカットを使い要素を特定4. ネックになっているスタイルを特定5. そのスタイルが必要かどうかを検討

55. PAINTFirst paintvar fp = chrome.loadTimes().firstPaintTime -chrome.loadTimes().startLoadTime;console.log(First paint: + fp);http://goo.gl/H1JfA

56. CSS ANIMATION

57. http://frames-per-second.appspot.com/CSS ANIMATION

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. 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. http://intely.jp/CSS ANIMATION

61. http://codepen.io/pocotan001/full/ihvcFCSS ANIMATION

62. http://codepen.io/pocotan001/full/ihvcFCSS ANIMATION

63. http://codepen.io/ariya/full/xuwgyCSS ANIMATION

64. http://leaverou.github.io/animatable/CSS ANIMATION

65. http://andrew-hoyer.com/experiments/clock/CSS ANIMATION

66. http://mrdoob.github.io/three.js/examples/css3d_periodictable.htmlCSS ANIMATION

67. http://dev.sencha.com/animator/demos/redridinghood/CSS ANIMATION

68. http://tympanus.net/Development/ImageTransitions/index.htmlCSS ANIMATION

69. http://jsbin.com/eﬁrip/5CSS ANIMATION

70. CSS ANIMATIONまとめ 目安は30fps 動く部分のみ composited layer として分離する 不要なテクスチャのアップロードを見つける

71. TalkNote × FrontrendThank you

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

Hayato Mizuno (8 SlideShares) , Front-end Developer at CyberAgent, Inc.

Views

Actions

Embeds 0

Report content

Transcript