ブラウザレンダリング最適化テクニックtaiga.jpTaiga Hirohata
AboutFreelance engineer(Flash, Flex, AIR, JavaScript etc)Principle Classmethod, Inc.Adobe Community Professionalhttp:/...
Optimizing Browser Renderinghttp://tv.adobe.com/watch/max-2013/optimizing-browser-rendering/Original3 / 44© 2013 taiga.jp
URLに移動すると Web ページがローダーによって「タグスープ」として呼び出されるタグスープはパースする必要があるページ読み込み (遷移)Network Local Tag soupHTMLParser4 / 44© 2013 taiga...
DOM ツリーを構築することが目的HTML パース5 / 44© 2013 taiga.jp
正しい HTML を解釈した場合の例HTML パース<html><head><title>Yo!</title></head><body><div><img src="max.png"></div><div><p>ADC MEETUP 07<...
正しい HTML を解釈した場合の例HTML パースHTMLHtmlElementHTMLHeadElement HTMLBodyElementHTMLTitleElement HTMLDivElement HTMLDivElementHTM...
不完全な HTML でもパーサはいくつかの推測を行い補うHTML パース (推測)<html><head><title>Yo!</title></head><body><div><img src="max.png"></div><div><p...
正解HTML パース (推測)HTMLHtmlElementHTMLHeadElement HTMLBodyElementHTMLTitleElement HTMLDivElement HTMLDivElementHTMLPragraphEl...
不完全な HTML で推測失敗した場合HTML パース (誤推測)<html><head><title>Yo!</title></head><body><div><img src="max.png"><div><p>ADC MEETUP 07...
何か違うHTML パース (誤推測)HTMLHtmlElementHTMLHeadElement HTMLBodyElementHTMLTitleElement HTMLImageElement HTMLDivElementHTMLPragr...
最近のブラウザパーサーがブロックまたは待機しそうな場合それを予測してその他の外部リソースを先読みするウォーターフォール12 / 44© 2013 taiga.jp
ウォーターフォールinvalidvalid13 / 44© 2013 taiga.jp
demo14 / 44© 2013 taiga.jp
default style sheetinline stylesinline CSSCSS Loaded from external filesCSS15 / 44© 2013 taiga.jp
CSSp, div {margin-top: 3px;}.error {color: red;}CSSStyleSheetCSSRulepSelectors Declarationdiv margin-top 3pxCSSRuleSelecto...
DOM ツリーとスタイル情報を元にレンダーツリーが構築されるレンダーツリーは視覚的な情報を保持するDOM + CSS によるツリーHTML ParsertoDOM TreeRenderTreePaint!CSS ParsertoStyle ...
適切なスタイルは DOM ツリー内の各エレメントに対して計算される必要があるスタイルは様々なマップに格納される(後で簡単に取得できるようにするため)マッピングは検索の範囲を減らし結果的に負荷軽減へと繋がるCSS スタイル マッチング18 ...
CSS スタイル マッチングdiv {font-size: 11px;}table div {font-size: 12pt;}#theId {display: none;}.myClass {color: #ff0000;}<html><bo...
セレクタの詳細性 (specificity) は重要…だが混乱しやすいのでできるだけ具体的に純粋なパフォーマンス観点よりID セレクタに続いてクラスセレクタは高速子孫セレクタ、子セレクタは可能な限り避けるべきCSS クイックアドバイス...
セレクタの詳細度計算“Selectors Level 3” W3C Recommendation 29 Sep 2011セレクタ内の… ( style 属性は詳細度最強 )• ID セレクタの個数を数える (=A)• クラスセレクタ、属性ク...
セレクタの詳細度計算CSS クイックアドバイス* /* A=0 B=0 C=0 -> 詳細度 = 0 */li /* A=0 B=0 C=1 -> 詳細度 = 1 */ul li /* A=0 B=0 C=2 -> 詳細度 = 2 */ul ...
レンダーツリーはディスプレイの視覚的様相に関係しているレンダーツリーの理解23 / 44© 2013 taiga.jp
レンダーツリーの理解div {font-size: 11pt;}img {display: none;} htmlhead bodytitle div pspanTextNodeimgRootRenderBlockRenderBlock Ren...
元凶はシンプルWeb 環境で最も遅い操作は DOM 操作何をすべきかに応じてブラウザは無効なものをマークする必要があるひとつにまとめる25 / 44© 2013 taiga.jp
プロセスを再度有効にするということは下記図の一部を実行することを意味するひとつにまとめるDOMHTMLAttachmentRenderTreeHTMLParserCSSParserDOMTreeStyleRulesLayoutPainting...
色• 変更する表示/非表示• 変更しない再レイアウトおよび再測定• 変更しないRepaint only27 / 44© 2013 taiga.jp
Repaint onlyDOMHTMLAttachmentRenderTreeHTMLParserCSSParserDOMTreeStyleRulesLayoutPainting DisplayStyleSheets28 / 44© 2013 ...
サイズ• 変更する位置• 変更する再レイアウトおよび再測定• 変更するRe-layout / flow29 / 44© 2013 taiga.jp
Re-layout / flowDOMHTMLAttachmentRenderTreeHTMLParserCSSParserDOMTreeStyleRulesLayoutPainting DisplayStyleSheets30 / 44© 2...
Layout(reflow) Visualizationhttp://youtu.be/ZTnIxIA5KGw31 / 44© 2013 taiga.jp
これだけは覚えて帰ろうHTML ParsertoDOM Tree RenderTree(Reflow)Paint!CSS ParsertoStyle Rules32 / 44© 2013 taiga.jp
DOM 相互作用をより速くするためその相互作用の量を減らすべき常にフローチャートの最小量の実行を目指すブラウザがチャートの一部を複数回実行させる場合を考慮するツリーへの影響に注意を払う動作はより少なく33 / 44© 2013 taig...
パフォーマンスに欠かせないのはツールツール34 / 44© 2013 taiga.jp
YSlowChrome PluginFirefoxツール35 / 44© 2013 taiga.jp
Speed TracerChrome Pluginツール36 / 44© 2013 taiga.jp
FireBugFirefoxツール37 / 44© 2013 taiga.jp
dyna Trace(5 day trial)IE ExtensionFirefoxツール38 / 44© 2013 taiga.jp
jsPerfhttp://jsperf.com/ツール39 / 44© 2013 taiga.jp
Webpagetst.orghttp://www.webpagetest.org/ツール40 / 44© 2013 taiga.jp
強力なツール群Tools• Network View• Timeline• CSS ProfilerChrome Developer Tools41 / 44© 2013 taiga.jp
強力なツール群Render Information• Paint Rectangles• Composited Layer Borders• FPS Meter• Continuous Page RepaintingChrome Devel...
HTML5 ROCKSHow Browsers Work:Behind the scenes of modern web browsershttp://www.html5rocks.com/en/tutorials/internals/how...
有志による邦訳版https://github.com/cou929/Japanese-Translation-of-How-Browsers-Work/blob/master/index.rstさらに詳しく44 / 44© 2013 taig...
Upcoming SlideShare
Loading in …5
×

ブラウザレンダリング 最適化テクニック

3,454 views

Published on

taiga.jp

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

No Downloads
Views
Total views
3,454
On SlideShare
0
From Embeds
0
Number of Embeds
585
Actions
Shares
0
Downloads
10
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

ブラウザレンダリング 最適化テクニック

  1. 1. ブラウザレンダリング最適化テクニックtaiga.jpTaiga Hirohata
  2. 2. AboutFreelance engineer(Flash, Flex, AIR, JavaScript etc)Principle Classmethod, Inc.Adobe Community Professionalhttp://taiga.jp/@taiga2 / 44© 2013 taiga.jp
  3. 3. Optimizing Browser Renderinghttp://tv.adobe.com/watch/max-2013/optimizing-browser-rendering/Original3 / 44© 2013 taiga.jp
  4. 4. URLに移動すると Web ページがローダーによって「タグスープ」として呼び出されるタグスープはパースする必要があるページ読み込み (遷移)Network Local Tag soupHTMLParser4 / 44© 2013 taiga.jp
  5. 5. DOM ツリーを構築することが目的HTML パース5 / 44© 2013 taiga.jp
  6. 6. 正しい HTML を解釈した場合の例HTML パース<html><head><title>Yo!</title></head><body><div><img src="max.png"></div><div><p>ADC MEETUP 07</p></div></body></html>6 / 44© 2013 taiga.jp
  7. 7. 正しい HTML を解釈した場合の例HTML パースHTMLHtmlElementHTMLHeadElement HTMLBodyElementHTMLTitleElement HTMLDivElement HTMLDivElementHTMLPragraphElementHTMLImageElementTextNode7 / 44© 2013 taiga.jp
  8. 8. 不完全な HTML でもパーサはいくつかの推測を行い補うHTML パース (推測)<html><head><title>Yo!</title></head><body><div><img src="max.png"></div><div><p>ADC MEETUP 07</body></html>8 / 44© 2013 taiga.jp
  9. 9. 正解HTML パース (推測)HTMLHtmlElementHTMLHeadElement HTMLBodyElementHTMLTitleElement HTMLDivElement HTMLDivElementHTMLPragraphElementHTMLImageElementTextNode9 / 44© 2013 taiga.jp
  10. 10. 不完全な HTML で推測失敗した場合HTML パース (誤推測)<html><head><title>Yo!</title></head><body><div><img src="max.png"><div><p>ADC MEETUP 07</body></html>10 / 44© 2013 taiga.jp
  11. 11. 何か違うHTML パース (誤推測)HTMLHtmlElementHTMLHeadElement HTMLBodyElementHTMLTitleElement HTMLImageElement HTMLDivElementHTMLPragraphElementTextNode11 / 44© 2013 taiga.jp
  12. 12. 最近のブラウザパーサーがブロックまたは待機しそうな場合それを予測してその他の外部リソースを先読みするウォーターフォール12 / 44© 2013 taiga.jp
  13. 13. ウォーターフォールinvalidvalid13 / 44© 2013 taiga.jp
  14. 14. demo14 / 44© 2013 taiga.jp
  15. 15. default style sheetinline stylesinline CSSCSS Loaded from external filesCSS15 / 44© 2013 taiga.jp
  16. 16. CSSp, div {margin-top: 3px;}.error {color: red;}CSSStyleSheetCSSRulepSelectors Declarationdiv margin-top 3pxCSSRuleSelectors Declaration.error color red16 / 44© 2013 taiga.jp
  17. 17. DOM ツリーとスタイル情報を元にレンダーツリーが構築されるレンダーツリーは視覚的な情報を保持するDOM + CSS によるツリーHTML ParsertoDOM TreeRenderTreePaint!CSS ParsertoStyle Rules17 / 44© 2013 taiga.jp
  18. 18. 適切なスタイルは DOM ツリー内の各エレメントに対して計算される必要があるスタイルは様々なマップに格納される(後で簡単に取得できるようにするため)マッピングは検索の範囲を減らし結果的に負荷軽減へと繋がるCSS スタイル マッチング18 / 44© 2013 taiga.jp
  19. 19. CSS スタイル マッチングdiv {font-size: 11px;}table div {font-size: 12pt;}#theId {display: none;}.myClass {color: #ff0000;}<html><body><div><img src="max.png"></div><div><p>ADC MEETUP 07</p></div><p id="theId"></p><p class="myClass"></p></body></html>TagIDClass19 / 44© 2013 taiga.jp
  20. 20. セレクタの詳細性 (specificity) は重要…だが混乱しやすいのでできるだけ具体的に純粋なパフォーマンス観点よりID セレクタに続いてクラスセレクタは高速子孫セレクタ、子セレクタは可能な限り避けるべきCSS クイックアドバイス20 / 44© 2013 taiga.jp
  21. 21. セレクタの詳細度計算“Selectors Level 3” W3C Recommendation 29 Sep 2011セレクタ内の… ( style 属性は詳細度最強 )• ID セレクタの個数を数える (=A)• クラスセレクタ、属性クラスタ、疑似クラスセレクタの個数を数える (=B)• 型セレクタと疑似要素の個数を数える (=C)• 全称セレクタは無視されるCSS クイックアドバイス21 / 44© 2013 taiga.jp
  22. 22. セレクタの詳細度計算CSS クイックアドバイス* /* A=0 B=0 C=0 -> 詳細度 = 0 */li /* A=0 B=0 C=1 -> 詳細度 = 1 */ul li /* A=0 B=0 C=2 -> 詳細度 = 2 */ul ol+li /* A=0 B=0 C=3 -> 詳細度 = 3 */h1 + *[rel=up] /* A=0 B=1 C=1 -> 詳細度 = 11 */ul ol li.red /* A=0 B=1 C=3 -> 詳細度 = 13 */li.red.level /* A=0 B=2 C=1 -> 詳細度 = 21 */#x34y /* A=1 B=0 C=0 -> 詳細度 = 100 */#s12:not(foo) /* A=1 B=0 C=1 -> 詳細度 = 101 */22 / 44© 2013 taiga.jp
  23. 23. レンダーツリーはディスプレイの視覚的様相に関係しているレンダーツリーの理解23 / 44© 2013 taiga.jp
  24. 24. レンダーツリーの理解div {font-size: 11pt;}img {display: none;} htmlhead bodytitle div pspanTextNodeimgRootRenderBlockRenderBlock RenderBlockRenderlineRenderTextfont-size:11ptdisplay:nonefont-size:11pt24 / 44© 2013 taiga.jp
  25. 25. 元凶はシンプルWeb 環境で最も遅い操作は DOM 操作何をすべきかに応じてブラウザは無効なものをマークする必要があるひとつにまとめる25 / 44© 2013 taiga.jp
  26. 26. プロセスを再度有効にするということは下記図の一部を実行することを意味するひとつにまとめるDOMHTMLAttachmentRenderTreeHTMLParserCSSParserDOMTreeStyleRulesLayoutPainting DisplayStyleSheets26 / 44© 2013 taiga.jp
  27. 27. 色• 変更する表示/非表示• 変更しない再レイアウトおよび再測定• 変更しないRepaint only27 / 44© 2013 taiga.jp
  28. 28. Repaint onlyDOMHTMLAttachmentRenderTreeHTMLParserCSSParserDOMTreeStyleRulesLayoutPainting DisplayStyleSheets28 / 44© 2013 taiga.jp
  29. 29. サイズ• 変更する位置• 変更する再レイアウトおよび再測定• 変更するRe-layout / flow29 / 44© 2013 taiga.jp
  30. 30. Re-layout / flowDOMHTMLAttachmentRenderTreeHTMLParserCSSParserDOMTreeStyleRulesLayoutPainting DisplayStyleSheets30 / 44© 2013 taiga.jp
  31. 31. Layout(reflow) Visualizationhttp://youtu.be/ZTnIxIA5KGw31 / 44© 2013 taiga.jp
  32. 32. これだけは覚えて帰ろうHTML ParsertoDOM Tree RenderTree(Reflow)Paint!CSS ParsertoStyle Rules32 / 44© 2013 taiga.jp
  33. 33. DOM 相互作用をより速くするためその相互作用の量を減らすべき常にフローチャートの最小量の実行を目指すブラウザがチャートの一部を複数回実行させる場合を考慮するツリーへの影響に注意を払う動作はより少なく33 / 44© 2013 taiga.jp
  34. 34. パフォーマンスに欠かせないのはツールツール34 / 44© 2013 taiga.jp
  35. 35. YSlowChrome PluginFirefoxツール35 / 44© 2013 taiga.jp
  36. 36. Speed TracerChrome Pluginツール36 / 44© 2013 taiga.jp
  37. 37. FireBugFirefoxツール37 / 44© 2013 taiga.jp
  38. 38. dyna Trace(5 day trial)IE ExtensionFirefoxツール38 / 44© 2013 taiga.jp
  39. 39. jsPerfhttp://jsperf.com/ツール39 / 44© 2013 taiga.jp
  40. 40. Webpagetst.orghttp://www.webpagetest.org/ツール40 / 44© 2013 taiga.jp
  41. 41. 強力なツール群Tools• Network View• Timeline• CSS ProfilerChrome Developer Tools41 / 44© 2013 taiga.jp
  42. 42. 強力なツール群Render Information• Paint Rectangles• Composited Layer Borders• FPS Meter• Continuous Page RepaintingChrome Developer Tools42 / 44© 2013 taiga.jp
  43. 43. HTML5 ROCKSHow Browsers Work:Behind the scenes of modern web browsershttp://www.html5rocks.com/en/tutorials/internals/howbrowsersworkさらに詳しく43 / 44© 2013 taiga.jp
  44. 44. 有志による邦訳版https://github.com/cou929/Japanese-Translation-of-How-Browsers-Work/blob/master/index.rstさらに詳しく44 / 44© 2013 taiga.jp

×