• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
深入剖析浏览器
 

深入剖析浏览器

on

  • 79,704 views

淘宝UED前端培训课程

淘宝UED前端培训课程

Statistics

Views

Total Views
79,704
Views on SlideShare
17,504
Embed Views
62,200

Actions

Likes
153
Downloads
1,831
Comments
12

53 Embeds 62,200

http://ued.taobao.com 51441
http://www.cnblogs.com 9277
http://www.wufangbo.com 816
http://xianguo.com 141
http://www.iuulove.com 56
http://www.wojilu.com 50
http://cache.baidu.com 49
http://www.rainshadow.com.cn 42
http://www.osstyle.cn 39
http://www.ccjk.com 34
http://localhost 23
http://fe.com 23
http://www.pagegaga.com 20
http://www.th7.cn 19
http://rritw.com 18
http://www.plurk.com 17
http://www.itfeed.cn 13
http://www.itfeed.com 10
http://artdesigner.org 9
http://www.kaoder.com 9
http://jscode.cnblogs.com 9
http://www.580k.com 8
http://weicong.net 8
http://192.168.1.223 6
http://tieba.baidu.com 6
http://www.techgig.com 5
http://580k.com 5
https://twitter.com 5
http://kejire.com 4
http://www.kejire.com 4
http://ioshome.sinaapp.com 4
http://rss.itwwt.com 3
http://192.168.1.230 3
http://www.sogou.com 2
http://webmail.mail.126.com 2
http://8888.pumo.com.tw 2
http://icanc.net 2
http://m.cnblogs.com 1
http://www.doseoer.com 1
https://twimg0-a.akamaihd.net 1
http://webcache.googleusercontent.com 1
http://www.verydemo.com 1
http://cache.baiducontent.com 1
http://m501.mail.qq.com 1
http://translate.googleusercontent.com 1
http://mei.fm 1
http://106.10.137.112 1
http://www.tuicool.com 1
http://www.oofeeds.com 1
http://utsz.datapanda.net 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

110 of 12 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 很好很强大!
    Are you sure you want to
    Your message goes here
    Processing…
  • 值得看一下
    Are you sure you want to
    Your message goes here
    Processing…
  • 浏览器/盒模型/调试工具/开发工具
    Are you sure you want to
    Your message goes here
    Processing…
  • that's great
    Are you sure you want to
    Your message goes here
    Processing…
  • 很好的资料,后端开发也可以看看
    Are you sure you want to
    Your message goes here
    Processing…

110 of 12 previous next

Post Comment
Edit your comment

    深入剖析浏览器 深入剖析浏览器 Presentation Transcript

    • 深入剖析浏览器浏览器/盒模型/调试工具/开发工具函谷/拔赤 – F2E@Taobao 淘宝北京研发中心 2012-04
    • • Who Are We? 淘宝前端开发工程师 http://ued.taobao.com
    • Topic• 浏览器合模型和兼容性• 网页布局• 页面的渲染原理• 调试工具
    • 盒模型:Box Model
    • Hack(样式补丁)#box { color:black; /*firefox*/ color:red9; /*所有ie*/ *color:blue; /*ie7*/ _color:green; /*ie6*/}
    • CSS Basic Box Model
    • #box { border:20px solid red; padding:20px; width:100px; height:100px; <div id=“box”>} <p>#box</p>#box p { </div> width:100%; height:100%;}
    • Firefox with W3C box layout
    • IE with W3C box layout
    • IE with W3C box layout
    • 在IE的Quirks(怪异)模式下如何表现?
    • IE with Quirks box layout
    • 指定Doctype!<!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>
    • 注意:IE6 下的双边距Bug!
    • float:leftmargin-left:100px !IE6 float:left margin-left:100px IE6
    • This is a bug!
    • float:leftmargin-left:100px Fix thisdisplay: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; filter:alpha(opacity=50);}<!DOCTYPE html>…<div id=“box”> text Div在IE6/7下默认 没有hasLayout</div>
    • 记住:没有 hasLayout 的元素上 滤镜不起作用
    • 为什么需要haslayout?
    • 降低浏览器渲染压力
    • 默认不具有 hasLayout • div • span
    • 用css激活元素的 hasLayout • position • float • width(!auto) • height(!auto) • zoom • overflow
    • div#box { background:red; filter:alpha(opacity=50); height:19px;} 让div具有 hasLayout<!DOCTYPE html>…<div id=“box”> text</div>
    • IE8中滤镜正常工作IE6/7中滤镜正常工作
    • 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%;} height触发了#content 的hasLayout<div> <div id=“pic”></div> <div id=“content”>long text…</span></div>
    • #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>
    • #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>
    • 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不重叠• 浮动元素上下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:50px100px 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页面没有栅格概念
    • 随着内容增多,信息展现需要“规划”
    • Yahoo经典的950栅格系统
    • 熟悉的960宽度http://960.gs/demo.html
    • 淘宝950栅格原型
    • 淘宝栅格系统对照表
    • 布局的实现渐进增强一套html,多套css布局灵活2栏、3栏、4栏…主容器宽度自适应
    • 圣杯 vs 双飞翼
    • 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
    • 页面的渲染过程
    • JavascriptECMAScript 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="a">ok</span> <span id=“b">ok</span> </div></body></html>
    • <!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>
    • <!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>
    • <!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>
    • <!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
    • <!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
    • <!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
    • <!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>
    • http://www.taobao.com延时渲染:载入内容而不立即渲染减少浏览器渲染压力提高渲染速度
    • 开发/调试工具
    • 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请求队列 红线:DomReady时间绿线:首次渲染时间 页面加载的关键时间点 和http请求状态详情
    • Chrome Developer Tools• 调试更多高级特性(html5/本地存储)• 调试CPU和内存的使用率• 查看页面的reflow
    • 查看页面的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 & Translatorhtt[p://jayli.github.com bachi@taobao.com