深入剖析浏览器
- 2. • Who Are We?
淘宝前端开发工程师
http://ued.taobao.com
- 3. Topic
• 浏览器合模型和兼容性
• 网页布局
• 页面的渲染原理
• 调试工具
- 5. Hack(样式补丁)
#box {
color:black; /*firefox*/
color:red9; /*所有ie*/
*color:blue; /*ie7*/
_color:green; /*ie6*/
}
- 8. #box {
border:20px solid red;
padding:20px;
width:100px;
height:100px; <div id=“box”>
} <p>#box</p>
#box p { </div>
width:100%;
height:100%;
}
- 21. div#box {
background:red;
filter:alpha(opacity=50);
}
<!DOCTYPE html>
…
<div id=“box”>
text
</div>
- 23. div#box {
background:red;
filter:alpha(opacity=50);
}
<!DOCTYPE html>
…
<div id=“box”>
text Div在IE6/7下默认
没有hasLayout
</div>
- 29. div#box {
background:red;
filter:alpha(opacity=50);
height:19px;
} 让div具有
hasLayout
<!DOCTYPE html>
…
<div id=“box”>
text
</div>
- 34. #pic {
float:left;width:50px;height:50px;
}
#content {
border:1px solid blue;
background:yellow;height:100%;
}
<div>
<div id=“pic”></div>
<div id=“content”>long text…</span>
</div>
- 37. #pic {
float:left;width:50px;height:50px;
}
#content {
border:1px solid blue;
background:yellow;height:100%;
}
height触发了#content
的hasLayout
<div>
<div id=“pic”></div>
<div id=“content”>long text…</span>
</div>
- 38. #pic {
float:left;width:50px;height:50px;
}
#content { IE6/7下 #content
border:1px solid blue; 显示为矩形
background:yellow;height:100%;
}
height触发了#content
的hasLayout
<div>
<div id=“pic”></div>
<div id=“content”>long text…</span>
</div>
- 39. #pic {
float:left;width:50px;height:50px;
}
#content {
border:1px solid blue;
background:yellow;height:100%;
}
样式定义在wrapper上
<div style=“background:yellow”>
<div id=“pic”></div>
<div id=“content”>long text…</span>
</div>
- 42. display:
block
display:
inline
display:
inline-block;
- 43. display:
block
display:
inline
display: Hackforie7/6
inline-block;
*display:inline;
*zoom:1;
- 45. 边界重叠规则
• 水平margin不重叠
• 浮动元素上下margin不重叠(float)
• 飘动元素上下margin不重叠(position)
• 常规折行上下margin重叠
- 46. #wrapper {
width:500px;
}
#wrapper p{
width:100px;margin:50px;float:left;
}
<div id=“wrapper”>
<p></p>
<p></p>
…
</div>
- 48. #wrapper {
width:500px;
} 如果去掉浮动?
#wrapper p{
width:100px;margin:50px;float:left;
}
<div id=“wrapper”>
<p></p>
<p></p>
…
</div>
- 73. 290
990 栅格
30(列宽) x 25(列) + 10(槽宽) x 24(槽数)
- 74. 300
1000px “栅格”?
C(列宽) x n(列) + 10(槽宽) x (n-1)(槽数)
n∈[15,40],C∈Z 无解
- 84. <!DOCTYPE HTML>
<html lang="zh">
<head>head</head>
<body>
<script> error
//error
alert(document.getElementById('a'));
</script>
<span id="a“>error</span>
</body>
</html>
- 85. <!DOCTYPE HTML>
<html lang="zh">
<head>head</head>
<body>
<span id="a">ok</span>
<script> ok
//ok
alert(document.getElementById('a'));
</script>
</body>
</html>
- 88. <!DOCTYPE HTML> document
<html lang="zh">
<head>head</head> head
<body>
<div id=“J”>
<span id="a">ok</span>
<span id="a">ok</span>
</div>
</body>
</html>
- 89. <!DOCTYPE HTML> document
<html lang="zh">
<head>head</head> head
<body> body
<div id=“J”>
<span id="a">ok</span>
<span id=“b">ok</span>
</div>
</body>
</html>
- 90. <!DOCTYPE HTML> document
<html lang="zh">
<head>head</head> head
<body> body
<div id=“J”>
<span id="a">ok</span> div#J
<span id=“b">ok</span>
</div>
div#J available
</body>
</html>
- 91. <!DOCTYPE HTML> document
<html lang="zh">
<head>head</head> head
<body> body
<div id=“J”>
<span id="a">ok</span> div#J
<span id=“b">ok</span>
span#a
</div>
</body>
</html> span#a available
- 92. <!DOCTYPE HTML> document
<html lang="zh">
<head>head</head> head
<body> body
<div id=“J”>
<span id="a">ok</span> div#J
<span id=“b">ok</span>
span#a
</div> div#J contentready
</body> span#b
</html>
span#b available
- 93. <!DOCTYPE HTML> document
<html lang="zh">
<head>head</head> head
<body> body
<div id=“J”>
<span id="a">ok</span> div#J
<span id=“b">ok</span>
span#a
</div>
</body> span#b
</html>
domready
- 94. <!DOCTYPE HTML>
<html lang="zh">
<head>head</head>
<body> ok
<script>
Y.on(‘available’,function(){
alert(Y.one(‘#a’));
},’#a’);
</script>
<span id="a">ok</span>
</body>
</html>
- 98. 苦逼的前端工程师
• 工程师又套乱页面了,又要检查标签配对
• 每次修改脚本,传到测试环境才看到效果
• 调试压缩后的脚本
• 根据IE丑陋的报错定位到错误位置
• 缓存总是在捣乱
• 有没有工具来批量压缩脚本
• …
- 102. • firefox 插件
• 调试样式、布局
• debug JavaScript
• 查看网络情况
• 一批基于firebug的插件扩展
- 123. http请求队列
红线:DomReady时间
绿线:首次渲染时间
页面加载的关键时间点
和http请求状态详情
- 130. ref
• http://www.stevesouders.com/
• http://getfirebug.com
• http://developer.yahoo.com/yslow/
• http://www.fiddler2.com/fiddler2/
• http://www.httpwatch.com/
- 131. @jayli
F2E & Translator
htt[p://jayli.github.com
bachi@taobao.com