Your SlideShare is downloading. ×
0
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

10,442

Published on

TalkNote Vol.8「TalkNote × Frontrend」 …

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

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

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

No Downloads
Views
Total Views
10,442
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
87
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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:flags
  • 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
  • 33. BeforeREFLOWExample 2
  • 34. AfterREFLOW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
  • 39. BeforeREFLOWExample 3
  • 40. AfterREFLOW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: fixed, background-attachment: fixed ... 画面更新の原因となる操作ウィンドウサイズの変更, スクロール, テキストの入力 ...
  • 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. 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/efirip/5CSS ANIMATION
  • 70. CSS ANIMATIONまとめ 目安は30fps 動く部分のみ composited layer として分離する 不要なテクスチャのアップロードを見つける
  • 71. TalkNote × FrontrendThank you

×