• Like
深入剖析浏览器
Upcoming SlideShare
Loading in...5
×

深入剖析浏览器

  • 80,560 views
Uploaded on

淘宝UED前端培训课程

淘宝UED前端培训课程

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

Views

Total Views
80,560
On Slideshare
0
From Embeds
0
Number of Embeds
13

Actions

Shares
Downloads
1,873
Comments
12
Likes
155

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 深入剖析浏览器浏览器/盒模型/调试工具/开发工具函谷/拔赤 – F2E@Taobao 淘宝北京研发中心 2012-04
  • 2. • Who Are We? 淘宝前端开发工程师 http://ued.taobao.com
  • 3. Topic• 浏览器合模型和兼容性• 网页布局• 页面的渲染原理• 调试工具
  • 4. 盒模型:Box Model
  • 5. Hack(样式补丁)#box { color:black; /*firefox*/ color:red9; /*所有ie*/ *color:blue; /*ie7*/ _color:green; /*ie6*/}
  • 6. CSS Basic Box Model
  • 7. #box { border:20px solid red; padding:20px; width:100px; height:100px; <div id=“box”>} <p>#box</p>#box p { </div> width:100%; height:100%;}
  • 8. Firefox with W3C box layout
  • 9. IE with W3C box layout
  • 10. IE with W3C box layout
  • 11. 在IE的Quirks(怪异)模式下如何表现?
  • 12. IE with Quirks box layout
  • 13. 指定Doctype!<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML>
  • 14. 指定Doctype!<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML>
  • 15. 注意:IE6 下的双边距Bug!
  • 16. float:leftmargin-left:100px !IE6 float:left margin-left:100px IE6
  • 17. This is a bug!
  • 18. float:leftmargin-left:100px Fix thisdisplay:inline bug
  • 19. 注意:IE 中的HasLayout!
  • 20. div#box { background:red; filter:alpha(opacity=50);}<!DOCTYPE html>…<div id=“box”> text</div>
  • 21. IE8中滤镜正常工作IE6/7中滤镜不起作用
  • 22. div#box { background:red; filter:alpha(opacity=50);}<!DOCTYPE html>…<div id=“box”> text Div在IE6/7下默认 没有hasLayout</div>
  • 23. 记住:没有 hasLayout 的元素上 滤镜不起作用
  • 24. 为什么需要haslayout?
  • 25. 降低浏览器渲染压力
  • 26. 默认不具有 hasLayout • div • span
  • 27. 用css激活元素的 hasLayout • position • float • width(!auto) • height(!auto) • zoom • overflow
  • 28. div#box { background:red; filter:alpha(opacity=50); height:19px;} 让div具有 hasLayout<!DOCTYPE html>…<div id=“box”> text</div>
  • 29. IE8中滤镜正常工作IE6/7中滤镜正常工作
  • 30. Warning !!!
  • 31. hasLayout 元素呈现为 ”矩形”
  • 32. 我想实现的效果!
  • 33. #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>
  • 34. Firefox 中表现正确 IE8 中表现正确
  • 35. IE7 中展现错误IE6 中展现错误
  • 36. #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>
  • 37. #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>
  • 38. #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>
  • 39. IE7 中展现正确IE6 中展现正确
  • 40. IE6/7不支持display:inline-block?
  • 41. display: block display: inline display:inline-block;
  • 42. display: block display: inline display: Hackforie7/6 inline-block;*display:inline; *zoom:1;
  • 43. 元素的 Margin 重叠
  • 44. 边界重叠规则• 水平margin不重叠• 浮动元素上下margin不重叠(float)• 飘动元素上下margin不重叠(position)• 常规折行上下margin重叠
  • 45. #wrapper { width:500px;}#wrapper p{ width:100px;margin:50px;float:left;}<div id=“wrapper”> <p></p> <p></p> …</div>
  • 46. margin:50px100px margin:50px浮动元素上下margin不重叠
  • 47. #wrapper { width:500px;} 如果去掉浮动?#wrapper p{ width:100px;margin:50px;float:left;}<div id=“wrapper”> <p></p> <p></p> …</div>
  • 48. margin:50px无浮动/飘动元素上下margin重叠
  • 49. 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
  • 50. 网页布局
  • 51. CSS reset.css清除浏览器默认样式
  • 52. 早期Web页面没有栅格概念
  • 53. 随着内容增多,信息展现需要“规划”
  • 54. Yahoo经典的950栅格系统
  • 55. 熟悉的960宽度http://960.gs/demo.html
  • 56. 淘宝950栅格原型
  • 57. 淘宝栅格系统对照表
  • 58. 布局的实现渐进增强一套html,多套css布局灵活2栏、3栏、4栏…主容器宽度自适应
  • 59. 圣杯 vs 双飞翼
  • 60. http://www.alistapart.com/articles/holygrail 圣杯布局
  • 61. http://blog.html.it/layoutgala/ 双飞翼布局
  • 62. 淘宝主站常用布局
  • 63. 栅格在宽屏/响应式设计中的束缚
  • 64. 290 990 栅格30(列宽) x 25(列) + 10(槽宽) x 24(槽数)
  • 65. 300 1000px “栅格”?C(列宽) x n(列) + 10(槽宽) x (n-1)(槽数) n∈[15,40],C∈Z 无解
  • 66. 在布局变化不多的页面(淘宝首页),没有使用栅格 绝对定位,简单高效
  • 67. 在布局动态变化的页面中,也不适用静态栅格
  • 68. 响应式栅格的一种尝试LessFramework.css http://lessframework.com/
  • 69. Less:让CSS可被编程 http://www.lesscss.net
  • 70. 页面的渲染过程
  • 71. JavascriptECMAScript DOM BOM JavaScript的外在表现
  • 72. DOM和BOM• DOM W3C标准提供的文档模型,浏览器均实现了这个标准• BOM 浏览器对象模型,浏览器各自的实现
  • 73. 浏览器渲染过程
  • 74. 执行脚本过程中的渲染
  • 75. <!DOCTYPE HTML><html lang="zh"> <head>head</head><body><script> error //error alert(document.getElementById(a));</script><span id="a“>error</span></body></html>
  • 76. <!DOCTYPE HTML><html lang="zh"> <head>head</head><body><span id="a">ok</span><script> ok //ok alert(document.getElementById(a));</script></body></html>
  • 77. 三个重要的事件
  • 78. <!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>
  • 79. <!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>
  • 80. <!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>
  • 81. <!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>
  • 82. <!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
  • 83. <!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
  • 84. <!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
  • 85. <!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>
  • 86. http://www.taobao.com延时渲染:载入内容而不立即渲染减少浏览器渲染压力提高渲染速度
  • 87. 开发/调试工具
  • 88. Douglas Crockford:“前端工程师面需要面对的软件开发环境实在是糟糕透顶,让人难以置信!”
  • 89. 苦逼的前端工程师• 工程师又套乱页面了,又要检查标签配对• 每次修改脚本,传到测试环境才看到效果• 调试压缩后的脚本• 根据IE丑陋的报错定位到错误位置• 缓存总是在捣乱• 有没有工具来批量压缩脚本• …
  • 90. 前端工程师看起来像这样…
  • 91. 前端工程师的内心世界:看到bug,两眼放光
  • 92. • firefox 插件• 调试样式、布局• debug JavaScript• 查看网络情况• 一批基于firebug的插件扩展
  • 93. Fiddler• 监控http请求• 劫持http包,修改http头等信息• 做本地文件映射
  • 94. HTTP请求详情截获到的HTTP请求
  • 95. 本地文件映射
  • 96. YSlow• 监控页面性能• 查找页面瓶颈• 辅助调试页面
  • 97. 页面缓存后重量页面重量
  • 98. 语法检查报告检查JS语法
  • 99. 展开js脚本
  • 100. 图片优化
  • 101. 下载优化后的 图片成 每张图片的压 缩比例
  • 102. IE Developer ToolBar• 调试IE下的布局、样式• 模拟ie7、8的渲染效果
  • 103. 页面中会高亮显示 每个class和id 查看容器的 class和id
  • 104. 窗口中显示div的边界 查看页面中的div轮廓
  • 105. 测试不同的分辨率
  • 106. 脚本控制台面板继续执行的控制 查看执行结果设置断点,刷新页面 输入执行语句并回车
  • 107. 探测器面板,查看特定时间 段函数执行情况
  • 108. HTTP Watch• 查看页面渲染关键时间点• 兼容firefox和ie• 查看 http 瀑布
  • 109. http请求队列 红线:DomReady时间绿线:首次渲染时间 页面加载的关键时间点 和http请求状态详情
  • 110. Chrome Developer Tools• 调试更多高级特性(html5/本地存储)• 调试CPU和内存的使用率• 查看页面的reflow
  • 111. 查看页面的reflow
  • 112. 特定时间内 内存消耗情况
  • 113. 特定时间内CPU消耗情况
  • 114. 保持对IE的警觉• IE对乱码极其敏感• 浏览器缓存是否清除• JS代码是否通过了语法检查(JSLint)•…
  • 115. 前端工程师,人人都是Ninja!
  • 116. ref• http://www.stevesouders.com/• http://getfirebug.com• http://developer.yahoo.com/yslow/• http://www.fiddler2.com/fiddler2/• http://www.httpwatch.com/
  • 117. @jayli F2E & Translatorhtt[p://jayli.github.com bachi@taobao.com