Embed Size (px)
DESCRIPTION
淘宝UED前端培训课程
Citation preview
深入剖析浏览器
淘宝北京研发中心 2012-04
浏览器/盒模型/调试工具/开发工具
函谷/拔赤 – F2E@Taobao
• 浏览器合模型和兼容性
• 网页布局
• 页面的渲染原理
• 调试工具
Topic
盒模型：Box Model
#box {color:black; /*firefox*/color:red\9; /*所有ie*/*color:blue; /*ie7*/_color:green; /*ie6*/
}
Hack（样式补丁）
CSS Basic Box Model
#box {border:20px solid red;padding:20px;width:100px;height:100px;
}#box p {width:100%;height:100%;
}
<div id=“box”><p>#box</p>
</div>
Firefox with W3C box layout
IE with W3C box layout
IE with W3C box layout
在IE的Quirks(怪异)模式下如何表现？
IE with Quirks box layout
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML>
指定Doctype！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML>
指定Doctype！
注意：
IE6 下的双边距Bug！
float:leftmargin-left:100px
IE6
!IE6
float:leftmargin-left:100px
This is a bug!
float:leftmargin-left:100pxdisplay:inline
Fix this bug
注意：
IE 中的HasLayout！
div#box {background:red;filter:alpha(opacity=50);
}
<!DOCTYPE html>…<div id=“box”>text
</div>
IE6/7中滤镜不起作用
IE8中滤镜正常工作
div#box {background:red;filter:alpha(opacity=50);
}
<!DOCTYPE html>…<div id=“box”>text
</div>
Div在IE6/7下默认没有hasLayout
记住：没有 hasLayout 的元素上
滤镜不起作用
为什么需要haslayout？
降低浏览器渲染压力
• div• span
默认不具有 hasLayout
用css激活元素的 hasLayout
• position• float• width(!auto)• height(!auto)• zoom• overflow
div#box {background:red;filter:alpha(opacity=50);height:19px;
}
<!DOCTYPE html>…<div id=“box”>text
</div>
让div具有hasLayout
IE6/7中滤镜正常工作
IE8中滤镜正常工作
Warning !!!
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 {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>
height触发了#content的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>
height触发了#content的hasLayout
IE6/7�下 #content�显示为矩形
#pic {float:left;width:50px;height:50px;
}#content {border:1px solid blue;background:yellow;height:100%;
}
<div style=“background:yellow”><div id=“pic”></div><div id=“content”>long text…</span>
</div>
样式定义在wrapper上
IE7 中展现正确
IE6 中展现正确
IE6/7不支持display:inline-block？
display:block
display:inline
display:inline-block;
display:block
display:inline
display:inline-block;
*display:inline;*zoom:1;
Hack�for�ie7/6
元素的 Margin 重叠
边界重叠规则
• 水平margin不重叠
• 浮动元素上下margin不重叠(float)• 飘动元素上下margin不重叠(position)• 常规折行上下margin重叠
<div id=“wrapper”><p></p><p></p>…
</div>
#wrapper {width:500px;
}#wrapper p{width:100px;margin:50px;float:left;
}
margin:50px
margin:50px100px
浮动元素上下margin不重叠
<div id=“wrapper”><p></p><p></p>…
</div>
#wrapper {width:500px;
}#wrapper p{width:100px;margin:50px;float:left;
}
如果去掉浮动？
margin:50px
无浮动/飘动元素上下margin重叠
ref
• http://htmlhelp.com/tools/validator/doctype.html
• http://www.positioniseverything.net/explorer/floatIndent.html
• http://msdn.microsoft.com/en-us/library/bb250481%28v=vs.85%29.aspx
网页布局
CSS reset.css
清除浏览器默认样式
早期Web页面没有栅格概念
随着内容增多，信息展现需要“规划”
Yahoo经典的950栅格系统
淘宝950栅格原型
淘宝栅格系统对照表
渐进增强
一套html，多套css
布局灵活
2栏、3栏、4栏…
主容器宽度自适应
布局的实现
圣杯 vs 双飞翼
淘宝主站常用布局
栅格在宽屏/响应式设计中的束缚
990 栅格
30(列宽) x 25(列) + 10(槽宽) x 24(槽数)
290
300
1000px “栅格”?
C(列宽) x n(列) + 10(槽宽) x (n-1)(槽数)n∈[15,40],C∈Z 无解
在布局变化不多的页面(淘宝首页),没有使用栅格
绝对定位，简单高效
在布局动态变化的页面中，也不适用静态栅格
页面的渲染过程
Javascript
ECMAScript DOM BOM
JavaScript的外在表现
• DOMW3C标准提供的文档模型，浏览器均实现了这个标准
• BOM浏览器对象模型，浏览器各自的实现
DOM和BOM
浏览器渲染过程
执行脚本过程中的渲染
<!DOCTYPE HTML><html lang="zh"><head>head</head>
<body><script>//erroralert(document.getElementById('a'));
</script><span id="a“>error</span></body></html>
error
<!DOCTYPE HTML><html lang="zh"><head>head</head>
<body><span id="a">ok</span><script>//okalert(document.getElementById('a'));
</script></body></html>
ok
三个重要的事件
<!DOCTYPE HTML><html lang="zh"><head>head</head>
<body><div id=“J”>
<span id="a">ok</span><span id=“b">ok</span>
</div></body></html>
<!DOCTYPE HTML><html lang="zh"><head>head</head>
<body><div id=“J”>
<span id="a">ok</span><span id="a">ok</span>
</div></body></html>
document
head
<!DOCTYPE HTML><html lang="zh"><head>head</head>
<body><div id=“J”>
<span id="a">ok</span><span id=“b">ok</span>
</div></body></html>
document
head
body
<!DOCTYPE HTML><html lang="zh"><head>head</head>
<body><div id=“J”>
<span id="a">ok</span><span id=“b">ok</span>
</div></body></html>
document
head
body
div#J
div#J available
<!DOCTYPE HTML><html lang="zh"><head>head</head>
<body><div id=“J”>
<span id="a">ok</span><span id=“b">ok</span>
</div></body></html>
document
head
body
div#J
span#a
span#a available
<!DOCTYPE HTML><html lang="zh"><head>head</head>
<body><div id=“J”>
<span id="a">ok</span><span id=“b">ok</span>
</div></body></html>
document
head
body
div#J
span#a
span#b
span#b available
div#J contentready
<!DOCTYPE HTML><html lang="zh"><head>head</head>
<body><div id=“J”>
<span id="a">ok</span><span id=“b">ok</span>
</div></body></html>
document
head
body
div#J
span#a
span#b
domready
<!DOCTYPE HTML><html lang="zh"><head>head</head>
<body><script>Y.on(‘available’,function(){
alert(Y.one(‘#a’));},’#a’);
</script><span id="a">ok</span></body></html>
ok
开发/调试工具
Douglas Crockford:“前端工程师面需要面对的软件开发环
境实在是糟糕透顶，让人难以置信！”
• 工程师又套乱页面了，又要检查标签配对
• 每次修改脚本，传到测试环境才看到效果
• 调试压缩后的脚本
• 根据IE丑陋的报错定位到错误位置
• 缓存总是在捣乱
• 有没有工具来批量压缩脚本
• …
苦逼的前端工程师
前端工程师看起来像这样…
前端工程师的内心世界：看到bug，两眼放光
• firefox 插件
• 调试样式、布局
• debug JavaScript
• 查看网络情况
• 一批基于firebug的插件扩展
Fiddler
• 监控http请求
• 劫持http包，修改http头等信息
• 做本地文件映射
截获到的HTTP请求
HTTP请求详情
本地文件映射
YSlow
• 监控页面性能
• 查找页面瓶颈
• 辅助调试页面
页面重量
页面缓存后重量
检查JS语法
语法检查报告
展开js脚本
图片优化
下载优化后的图片成
每张图片的压缩比例
IE Developer ToolBar
• 调试IE下的布局、样式
• 模拟ie7、8的渲染效果
查看容器的class和id
页面中会高亮显示每个class和id
查看页面中的div轮廓
窗口中显示div的边界
测试不同的分辨率
设置断点，刷新页面
继续执行的控制
输入执行语句并回车
查看执行结果
脚本控制台面板
探测器面板,查看特定时间段函数执行情况
HTTP Watch
• 查看页面渲染关键时间点
• 兼容firefox和ie
• 查看 http 瀑布
页面加载的关键时间点和http请求状态详情
http请求队列
绿线：首次渲染时间
红线：DomReady时间
Chrome Developer
Tools
• 调试更多高级特性(html5/本地存储)
• 调试CPU和内存的使用率
• 查看页面的reflow
查看页面的reflow
特定时间内 内存消耗情况
特定时间内CPU消耗情况
• IE对乱码极其敏感
• 浏览器缓存是否清除
• JS代码是否通过了语法检查(JSLint)
• …
保持对IE的警觉
前端工程师，人人都是Ninja!
ref
• http://www.stevesouders.com/• http://getfirebug.com • http://developer.yahoo.com/yslow/• http://www.fiddler2.com/fiddler2/• http://www.httpwatch.com/
![第二篇 基本应用篇 - Xidian · 4.3 安装和启用360浏览器 1. 下载和安装360浏览器软件 [示例6]：下载与安装360浏览器 以上内容与步骤：参见p109～p110，图4-22。](https://img.dokumen.tips/doc/110x75/60a34b25ce91ea57380b0f7e/coec-oecc-xidian-43-eoec360e-1-eoee360ee.jpg)
