深入剖析浏览器

深入剖析浏览器
浏览器/盒模型/调试工具/开发工具
函谷/拔赤 – F2E@Taobao

淘宝北京研发中心 2012-04

• Who Are We?
淘宝前端开发工程师
http://ued.taobao.com

Topic

• 浏览器合模型和兼容性
• 网页布局
• 页面的渲染原理
• 调试工具

Hack（样式补丁）

#box {
color:black; /*firefox*/
color:red9; /*所有ie*/
*color:blue; /*ie7*/
_color:green; /*ie6*/
}

#box {
border:20px solid red;
padding:20px;
width:100px;
height:100px; <div id=“box”>
} <p>#box</p>
#box p { </div>
width:100%;
height:100%;
}

在IE的Quirks(怪异)模式下如何表现？

指定Doctype！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML>

注意：
IE6 下的双边距Bug！

float:left
margin-left:100px !IE6

float:left
margin-left:100px IE6

float:left
margin-left:100px
Fix this
display:inline bug

注意：
IE 中的HasLayout！

div#box {
background:red;
filter:alpha(opacity=50);
}

<!DOCTYPE html>
…
<div id=“box”>
text
</div>

IE8中滤镜正常工作

IE6/7中滤镜不起作用

div#box {
background:red;
}

<!DOCTYPE html>
…
<div id=“box”>
text Div在IE6/7下默认
没有hasLayout
</div>

记住：
没有 hasLayout 的元素上
滤镜不起作用

默认不具有 hasLayout
• div
• span

用css激活元素的 hasLayout
• position
• float
• width(!auto)
• height(!auto)
• zoom
• overflow

div#box {
background:red;
height:19px;
} 让div具有
hasLayout
<!DOCTYPE html>
…
<div id=“box”>
text
</div>

IE8中滤镜正常工作

IE6/7中滤镜正常工作

hasLayout 元素呈现为
”矩形”

#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>

Firefox 中表现正确

IE8 中表现正确

IE7 中展现错误

IE6 中展现错误

#pic {
}
#content {
}
height触发了#content
的hasLayout
<div>
</div>

#pic {
}
#content { IE6/7下 #content
border:1px solid blue; 显示为矩形
}
height触发了#content
的hasLayout
<div>
</div>

#pic {
}
#content {
}
样式定义在wrapper上

<div style=“background:yellow”>
</div>

IE7 中展现正确

IE6 中展现正确

IE6/7不支持
display:inline-block？

display:
block

display:
inline

display:
inline-block;

display:
block

display:
inline

display: Hackforie7/6
inline-block;
*display:inline;
*zoom:1;

边界重叠规则

• 水平margin不重叠
• 浮动元素上下margin不重叠(float)
• 飘动元素上下margin不重叠(position)
• 常规折行上下margin重叠

#wrapper {
width:500px;
}
#wrapper p{
width:100px;margin:50px;float:left;
}

<div id=“wrapper”>
<p></p>
<p></p>
…
</div>

margin:50px
100px
margin:50px

浮动元素上下margin不重叠

#wrapper {
width:500px;
} 如果去掉浮动？
#wrapper p{
width:100px;margin:50px;float:left;
}

<div id=“wrapper”>
<p></p>
<p></p>
…
</div>

margin:50px

无浮动/飘动元素上下margin重叠

ref

• http://htmlhelp.com/tools/validator/docty
pe.html
• http://www.positioniseverything.net/explor
er/floatIndent.html
• http://msdn.microsoft.com/en-
us/library/bb250481%28v=vs.85%29.aspx

CSS reset.css
清除浏览器默认样式

早期Web页面没有栅格概念

随着内容增多，信息展现需要“规划”

熟悉的960宽度
http://960.gs/demo.html

布局的实现
渐进增强
一套html，多套css
布局灵活
2栏、3栏、4栏…
主容器宽度自适应

http://www.alistapart.com/articles/holygrail
圣杯布局

http://blog.html.it/layoutgala/
双飞翼布局

栅格在宽屏/响应式设计中的束缚

290

990 栅格
30(列宽) x 25(列) + 10(槽宽) x 24(槽数)

300

1000px “栅格”?
C(列宽) x n(列) + 10(槽宽) x (n-1)(槽数)
n∈[15,40],C∈Z 无解

在布局变化不多的页面(淘宝首页),没有使用栅格
绝对定位，简单高效

在布局动态变化的页面中，也不适用静态栅格

响应式栅格的一种尝试LessFramework.css
http://lessframework.com/

Less:让CSS可被编程
http://www.lesscss.net

Javascript

ECMAScript DOM BOM

JavaScript的外在表现

DOM和BOM

• DOM
W3C标准提供的文档模型，浏览器均实现了这个标准
• BOM
浏览器对象模型，浏览器各自的实现

执行脚本过程中的渲染

<!DOCTYPE HTML>
<html lang="zh">
<head>head</head>
<body>
<script> error
//error
alert(document.getElementById('a'));
</script>
<span id="a“>error</span>
</body>
</html>

<!DOCTYPE HTML>
<html lang="zh">
<head>head</head>
<body>
<span id="a">ok</span>
<script> ok
//ok
alert(document.getElementById('a'));
</script>
</body>
</html>

<!DOCTYPE HTML>
<html lang="zh">
<head>head</head>
<body>
<div id=“J”>
<span id=“b">ok</span>
</div>
</body>
</html>

<!DOCTYPE HTML> document

<html lang="zh">
<head>head</head> head

<body>
<div id=“J”>
</div>
</body>
</html>


<html lang="zh">

<body> body
<div id=“J”>
<span id="a">ok</span> div#J

</div>
div#J available
</body>
</html>


<html lang="zh">

<body> body
<div id=“J”>

span#a
</div>
</body>
</html> span#a available


<html lang="zh">

<body> body
<div id=“J”>

span#a
</div> div#J contentready
</body> span#b

</html>
span#b available


<html lang="zh">

<body> body
<div id=“J”>

span#a
</div>
</body> span#b

</html>
domready

<!DOCTYPE HTML>
<html lang="zh">
<head>head</head>
<body> ok
<script>
Y.on(‘available’,function(){
alert(Y.one(‘#a’));
},’#a’);
</script>
</body>
</html>

http://www.taobao.com

延时渲染：
载入内容而不立即渲染
减少浏览器渲染压力
提高渲染速度

Douglas Crockford:
“前端工程师面需要面对的软件开发环
境实在是糟糕透顶，让人难以置信！”

苦逼的前端工程师
• 工程师又套乱页面了，又要检查标签配对
• 每次修改脚本，传到测试环境才看到效果
• 调试压缩后的脚本
• 根据IE丑陋的报错定位到错误位置
• 缓存总是在捣乱
• 有没有工具来批量压缩脚本
• …

前端工程师看起来像这样…

前端工程师的内心世界：看到bug，两眼放光

• firefox 插件
• 调试样式、布局
• debug JavaScript
• 查看网络情况
• 一批基于firebug的插件扩展

Fiddler

• 监控http请求
• 劫持http包，修改http头等信息
• 做本地文件映射

HTTP请求详情

截获到的HTTP请求

YSlow

• 监控页面性能
• 查找页面瓶颈
• 辅助调试页面

页面缓存后重量

页面重量

语法检查报告

检查JS语法

下载优化后的
图片成

每张图片的压
缩比例

IE Developer ToolBar

• 调试IE下的布局、样式
• 模拟ie7、8的渲染效果

页面中会高亮显示
每个class和id

查看容器的
class和id

窗口中显示div的边界

查看页面中的div轮廓

脚本控制台面板

继续执行的控制
查看执行结果

设置断点，刷新页面

输入执行语句并回车

探测器面板,查看特定时间
段函数执行情况

HTTP Watch

• 查看页面渲染关键时间点
• 兼容firefox和ie
• 查看 http 瀑布

http请求队列

红线：DomReady时间

绿线：首次渲染时间

页面加载的关键时间点
和http请求状态详情

Chrome Developer
Tools
• 调试更多高级特性(html5/本地存储)
• 调试CPU和内存的使用率
• 查看页面的reflow

特定时间内内存消耗情况

特定时间内CPU消耗情况

保持对IE的警觉
• IE对乱码极其敏感
• 浏览器缓存是否清除
• JS代码是否通过了语法检查(JSLint)
•…

前端工程师，人人都是Ninja!

ref

• http://www.stevesouders.com/
• http://getfirebug.com
• http://developer.yahoo.com/yslow/
• http://www.fiddler2.com/fiddler2/
• http://www.httpwatch.com/

@jayli
F2E & Translator
htt[p://jayli.github.com
bachi@taobao.com

深入剖析浏览器

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (10)

Ähnlich wie 深入剖析浏览器

Ähnlich wie 深入剖析浏览器 (20)

Mehr von jay li

Mehr von jay li (15)

深入剖析浏览器