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

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

2. @pocotan001 Hayato Mizuno

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

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

5. SETTINGS⚙

6. }下2つあればおk SETTINGS⚙

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

8. REFLOW PAINT CSS ANIMATION  

9. REFLOW 

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

11. paint HTML DOM CSSOM CSS レンダーツリー視覚部分を表すツリー REFLOW

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

13. html head body title h1 p [text node] [text node] [text node] REFLOW DOMツリー

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

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

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

17. root body h1 [text line] p [text line] visibility: hidden 位置やサイズの変更を伴わない → リフローなし REFLOW ツリーに挿入されない要素レンダーツリー head title [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. Before REFLOW Example 1

30. After REFLOW 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 paint var 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 ANIMATION GPUハック (null transform hack)  -webkit-transform: translateZ(0)  -webkit-transform: translate3d(0,0,0)  -webkit-transform: preserve-3d;  -webkit-backface-visibility: hidden;  ...etc

59. CSS ANIMATION GPUハック (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 × Frontrend Thank you

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

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

Recommended

More Related Content

What's hot

What's hot(20)

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

Similar to レンダリングを意識したパフォーマンスチューニング(20)

More from Hayato Mizuno

More from Hayato Mizuno(10)

Recently uploaded

Recently uploaded(13)

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