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

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

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

Vous êtes en train de lire un aperçu.

Consultez-les par la suite

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

Plus De Contenu Connexe

Diaporamas pour vous (20)

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

Plus par Hayato Mizuno (10)

Plus récents (20)