深入剖析浏览器
171 likes•11,256 views
该文档深入探讨了浏览器的盒模型、调试工具和网页布局原理，主要比较了不同浏览器之间的渲染差异与兼容性问题。文中涉及多种开发工具及其在调试过程中的应用，强调了前端工程师在开发环境中面临的挑战和解决方案。最后，文档提供了一些参考资料和工具链接，以帮助提高开发效率和页面性能。
![300
1000px “栅格”?
C(列宽) x n(列) + 10(槽宽) x (n-1)(槽数)
n∈[15,40],C∈Z 无解](https://image.slidesharecdn.com/random-120412045416-phpapp01/85/-74-320.jpg)
深入剖析浏览器
- 1. 深入剖析浏览器 浏览器/盒模型/调试工具/开发工具 函谷/拔赤 – F2E@Taobao 淘宝北京研发中心 2012-04
- 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*/ }
- 6. CSS Basic Box Model
- 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%; }
- 9. Firefox with W3C box layout
- 10. IE with W3C box layout
- 11. IE with W3C box layout
- 13. IE with Quirks box layout
- 14. 指定Doctype！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML>
- 15. 指定Doctype！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML>
- 17. float:left margin-left:100px !IE6 float:left margin-left:100px IE6
- 18. This is a bug!
- 19. float:left margin-left:100px Fix this display:inline bug
- 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>
- 24. 记住： 没有 hasLayout 的元素上 滤镜不起作用
- 25. 为什么需要 haslayout？
- 26. 降低浏览器渲染压力
- 27. 默认不具有 hasLayout • div • span
- 28. 用css激活元素的 hasLayout • position • float • width(!auto) • height(!auto) • zoom • overflow
- 29. div#box { background:red; filter:alpha(opacity=50); height:19px; } 让div具有 hasLayout <!DOCTYPE html> … <div id=“box”> text </div>
- 31. Warning !!!
- 32. hasLayout 元素呈现为 ”矩形”
- 33. 我想实现的效果！
- 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>
- 35. Firefox 中表现正确 IE8 中表现正确
- 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;
- 44. 元素的 Margin 重叠
- 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>
- 47. margin:50px 100px margin:50px 浮动元素上下margin不重叠
- 48. #wrapper { width:500px; } 如果去掉浮动？ #wrapper p{ width:100px;margin:50px;float:left; } <div id=“wrapper”> <p></p> <p></p> … </div>
- 50. 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
- 51. 网页布局
- 53. 早期Web页面没有栅格概念
- 55. Yahoo经典的950栅格系统
- 57. 淘宝950栅格原型
- 58. 淘宝栅格系统对照表
- 60. 圣杯 vs 双飞翼
- 71. 淘宝主站常用布局
- 72. 栅格在宽屏/响应式设计中的束缚
- 73. 290 990 栅格 30(列宽) x 25(列) + 10(槽宽) x 24(槽数)
- 74. 300 1000px “栅格”? C(列宽) x n(列) + 10(槽宽) x (n-1)(槽数) n∈[15,40],C∈Z 无解
- 75. 在布局变化不多的页面(淘宝首页),没有使用栅格 绝对定位，简单高效
- 77. 响应式栅格的一种尝试LessFramework.css http://lessframework.com/
- 79. 页面的渲染过程
- 80. Javascript ECMAScript DOM BOM JavaScript的外在表现
- 81. DOM和BOM • DOM W3C标准提供的文档模型，浏览器均实现了这个标准 • BOM 浏览器对象模型，浏览器各自的实现
- 82. 浏览器渲染过程
- 83. 执行脚本过程中的渲染
- 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>
- 86. 三个重要的事件
- 87. <!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>
- 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>
- 96. 开发/调试工具
- 98. 苦逼的前端工程师 • 工程师又套乱页面了，又要检查标签配对 • 每次修改脚本，传到测试环境才看到效果 • 调试压缩后的脚本 • 根据IE丑陋的报错定位到错误位置 • 缓存总是在捣乱 • 有没有工具来批量压缩脚本 • …
- 99. 前端工程师看起来像这样…
- 102. • firefox 插件 • 调试样式、布局 • debug JavaScript • 查看网络情况 • 一批基于firebug的插件扩展
- 107. Fiddler • 监控http请求 • 劫持http包，修改http头等信息 • 做本地文件映射
- 108. HTTP请求详情 截获到的HTTP请求
- 109. 本地文件映射
- 110. YSlow • 监控页面性能 • 查找页面瓶颈 • 辅助调试页面
- 111. 页面缓存后重量 页面重量
- 112. 语法检查报告 检查JS语法
- 113. 展开js脚本
- 114. 图片优化
- 115. 下载优化后的 图片成 每张图片的压 缩比例
- 116. IE Developer ToolBar • 调试IE下的布局、样式 • 模拟ie7、8的渲染效果
- 117. 页面中会高亮显示 每个class和id 查看容器的 class和id
- 118. 窗口中显示div的边界 查看页面中的div轮廓
- 119. 测试不同的分辨率
- 120. 脚本控制台面板 继续执行的控制 查看执行结果 设置断点，刷新页面 输入执行语句并回车
- 121. 探测器面板,查看特定时间 段函数执行情况
- 122. HTTP Watch • 查看页面渲染关键时间点 • 兼容firefox和ie • 查看 http 瀑布
- 123. http请求队列 红线：DomReady时间 绿线：首次渲染时间 页面加载的关键时间点 和http请求状态详情
- 124. Chrome Developer Tools • 调试更多高级特性(html5/本地存储) • 调试CPU和内存的使用率 • 查看页面的reflow
- 125. 查看页面的reflow
- 126. 特定时间内 内存消耗情况
- 127. 特定时间内CPU消耗情况
- 128. 保持对IE的警觉 • IE对乱码极其敏感 • 浏览器缓存是否清除 • JS代码是否通过了语法检查(JSLint) •…
- 129. 前端工程师，人人都是Ninja!
- 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 [email protected]