More Related Content
Similar to ブラウザレンダリング 最適化テクニック
Similar to ブラウザレンダリング 最適化テクニック (20)
More from クラスメソッド株式会社 (12)
ブラウザレンダリング 最適化テクニック
- 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. 正しい HTML を解釈した場合の例
HTML パース
HTMLHtmlElement
HTMLHeadElement HTMLBodyElement
HTMLTitleElement HTMLDivElement HTMLDivElement
HTMLPragraphElementHTMLImageElement
TextNode
7 / 44© 2013 taiga.jp
- 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
- 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
- 16. 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
- 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>
Tag
ID
Class
19 / 44© 2013 taiga.jp
- 21. セレクタの詳細度計算
“Selectors Level 3” W3C Recommendation 29 Sep 2011
セレクタ内の… ( style 属性は詳細度最強 )
• ID セレクタの個数を数える (=A)
• クラスセレクタ、属性クラスタ、
疑似クラスセレクタの個数を数える (=B)
• 型セレクタと疑似要素の個数を数える (=C)
• 全称セレクタは無視される
CSS クイックアドバイス
21 / 44© 2013 taiga.jp
- 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
- 24. レンダーツリーの理解
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
- 43. 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