Embed Size (px)
DESCRIPTION
taiga.jp
Citation preview
ブラウザレンダリング 最適化テクニック
taiga.jp Taiga Hirohata
About
Freelance engineer (Flash, Flex, AIR, JavaScript etc)
Principle Classmethod, Inc.
Adobe Community Professional
http://taiga.jp/
@taiga
2 / 44 © 2013 taiga.jp
Optimizing Browser Rendering http://tv.adobe.com/watch/max-2013/optimizing-browser-rendering/
Original
3 / 44 © 2013 taiga.jp
URLに移動すると Web ページが ローダーによって「タグスープ」として呼び出される
タグスープはパースする必要がある
ページ読み込み (遷移)
Network Local Tag soup HTML
Parser
4 / 44 © 2013 taiga.jp
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</p></div>
</body>
</html>
6 / 44 © 2013 taiga.jp
正しい HTML を解釈した場合の例
HTML パース
HTMLHtmlElement
HTMLHeadElement HTMLBodyElement
HTMLTitleElement HTMLDivElement HTMLDivElement
HTMLPragraphElement HTMLImageElement
TextNode
7 / 44 © 2013 taiga.jp
不完全な 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
正解
HTML パース (推測)
HTMLHtmlElement
HTMLHeadElement HTMLBodyElement
HTMLTitleElement HTMLDivElement HTMLDivElement
HTMLPragraphElement HTMLImageElement
TextNode
9 / 44 © 2013 taiga.jp
不完全な 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
何か違う
HTML パース (誤推測)
HTMLHtmlElement
HTMLHeadElement HTMLBodyElement
HTMLTitleElement HTMLImageElement HTMLDivElement
HTMLPragraphElement
TextNode
11 / 44 © 2013 taiga.jp
最近のブラウザ
パーサーがブロックまたは待機しそうな場合 それを予測してその他の外部リソースを先読みする
ウォーターフォール
12 / 44 © 2013 taiga.jp
ウォーターフォール
invalid
valid
13 / 44 © 2013 taiga.jp
demo
14 / 44 © 2013 taiga.jp
default style sheet
inline styles
inline CSS
CSS Loaded from external files
CSS
15 / 44 © 2013 taiga.jp
CSS
p, div {
margin-top: 3px;
}
.error {
color: red;
}
CSSStyleSheet
CSSRule
p
Selectors Declaration
div margin-top 3px
CSSRule
Selectors Declaration
.error color red
16 / 44 © 2013 taiga.jp
DOM ツリーとスタイル情報を元に レンダーツリーが構築される
レンダーツリーは視覚的な情報を保持する
DOM + CSS によるツリー
HTML Parser to
DOM Tree Render Tree
Paint!
CSS Parser to
Style Rules
17 / 44 © 2013 taiga.jp
適切なスタイルは DOM ツリー内の 各エレメントに対して計算される必要がある
スタイルは様々なマップに格納される (後で簡単に取得できるようにするため)
マッピングは検索の範囲を減らし 結果的に負荷軽減へと繋がる
CSS スタイル マッチング
18 / 44 © 2013 taiga.jp
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>
Tag
ID
Class
19 / 44 © 2013 taiga.jp
セレクタの詳細性 (specificity) は重要
…だが混乱しやすいのでできるだけ具体的に
純粋なパフォーマンス観点より
ID セレクタに続いてクラスセレクタは高速
子孫セレクタ、子セレクタは 可能な限り避けるべき
CSS クイックアドバイス
20 / 44 © 2013 taiga.jp
セレクタの詳細度計算 “Selectors Level 3” W3C Recommendation 29 Sep 2011
セレクタ内の… ( style 属性は詳細度最強 )
• ID セレクタの個数を数える (=A)
• クラスセレクタ、属性クラスタ、 疑似クラスセレクタの個数を数える (=B)
• 型セレクタと疑似要素の個数を数える (=C)
• 全称セレクタは無視される
CSS クイックアドバイス
21 / 44 © 2013 taiga.jp
セレクタの詳細度計算
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 / 44 © 2013 taiga.jp
レンダーツリーの理解 div {
font-size: 11pt;
}
img {
display: none;
} html
head body
title div p
span
TextNode
img
Root
RenderBlock
RenderBlock RenderBlock
Renderline
RenderText font-size:11pt
display:none
font-size:11pt
24 / 44 © 2013 taiga.jp
元凶はシンプル
Web 環境で最も遅い操作は DOM 操作
何をすべきかに応じてブラウザは 無効なものをマークする必要がある
ひとつにまとめる
25 / 44 © 2013 taiga.jp
プロセスを再度有効にするということは 下記図の一部を実行することを意味する
ひとつにまとめる
DOM
HTML
Attachment Render Tree
HTML Parser
CSS Parser
DOM Tree
Style Rules
Layout
Painting Display
Style Sheets
26 / 44 © 2013 taiga.jp
色
• 変更する
表示/非表示
• 変更しない
再レイアウトおよび再測定
• 変更しない
Repaint only
27 / 44 © 2013 taiga.jp
Repaint only DOM
HTML
Attachment Render Tree
HTML Parser
CSS Parser
DOM Tree
Style Rules
Layout
Painting Display
Style Sheets
28 / 44 © 2013 taiga.jp
サイズ
• 変更する
位置
• 変更する
再レイアウトおよび再測定
• 変更する
Re-layout / flow
29 / 44 © 2013 taiga.jp
Re-layout / flow DOM
HTML
Attachment Render Tree
HTML Parser
CSS Parser
DOM Tree
Style Rules
Layout
Painting Display
Style Sheets
30 / 44 © 2013 taiga.jp
Layout(reflow) Visualization
http://youtu.be/ZTnIxIA5KGw
31 / 44 © 2013 taiga.jp
これだけは覚えて帰ろう
HTML Parser to
DOM Tree Render Tree
(Reflow) Paint!
CSS Parser to
Style Rules
32 / 44 © 2013 taiga.jp
DOM 相互作用をより速くするため その相互作用の量を減らすべき
常にフローチャートの最小量の実行を目指す
ブラウザがチャートの一部を複数回 実行させる場合を考慮する
ツリーへの影響に注意を払う
動作はより少なく
33 / 44 © 2013 taiga.jp
パフォーマンスに欠かせないのはツール
ツール
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
強力なツール群
Tools
• Network View
• Timeline
• CSS Profiler
Chrome Developer Tools
41 / 44 © 2013 taiga.jp
強力なツール群
Render Information
• Paint Rectangles
• Composited Layer Borders
• FPS Meter
• Continuous Page Repainting
Chrome Developer Tools
42 / 44 © 2013 taiga.jp
HTML5 ROCKS
How Browsers Work: Behind the scenes of modern web browsers http://www.html5rocks.com/en/tutorials/internals/howbrowserswork
さらに詳しく
43 / 44 © 2013 taiga.jp
有志による邦訳版
https://github.com/cou929/Japanese-Translation-of-How-Browsers-Work/blob/master/index.rst
さらに詳しく
44 / 44 © 2013 taiga.jp
