ブラウザレンダリング最適化テクニック

ブラウザレンダリング
最適化テクニック
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
HTMLPragraphElementHTMLImageElement
TextNode
7 / 44© 2013 taiga.jp

不完全な HTML でもパーサはいくつかの
推測を行い補う
HTML パース (推測)
<html>
<head>
<title>Yo!</title>
</head>
<body>
<div><p>ADC MEETUP 07
</body>
</html>
8 / 44© 2013 taiga.jp

正解
HTML パース (推測)
HTMLHtmlElement
HTMLTitleElement HTMLDivElement HTMLDivElement
HTMLPragraphElementHTMLImageElement
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
HTMLTitleElement HTMLImageElement HTMLDivElement
HTMLPragraphElement
TextNode
11 / 44© 2013 taiga.jp

最近のブラウザ
パーサーがブロックまたは待機しそうな場合
それを予測してその他の外部リソースを先読
みする
ウォーターフォール
12 / 44© 2013 taiga.jp

ウォーターフォール
invalid
valid
13 / 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><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)
• 全称セレクタは無視される
21 / 44© 2013 taiga.jp

セレクタの詳細度計算
* /* 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
RenderTextfont-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

DOM 相互作用をより速くするため
その相互作用の量を減らすべき
常にフローチャートの最小量の実行を目指す
ブラウザがチャートの一部を複数回
実行させる場合を考慮する
ツリーへの影響に注意を払う
動作はより少なく
33 / 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/in
ternals/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

ブラウザレンダリング最適化テクニック

Recommended

Recommended

More Related Content

Similar to ブラウザレンダリング最適化テクニック

Similar to ブラウザレンダリング最適化テクニック (20)

More from クラスメソッド株式会社

More from クラスメソッド株式会社 (12)

Recently uploaded

Recently uploaded (16)