Downloaded 2,034 times
![300
1000px “栅格”?
C(列宽) x n(列) + 10(槽宽) x (n-1)(槽数)
n∈[15,40],C∈Z 无解](https://image.slidesharecdn.com/random-120412045416-phpapp01/75/slide-74-2048.jpg)
Uploaded byjay li
深入剖析浏览器
该文档深入探讨了浏览器的盒模型、调试工具和网页布局原理，主要比较了不同浏览器之间的渲染差异与兼容性问题。文中涉及多种开发工具及其在调试过程中的应用，强调了前端工程师在开发环境中面临的挑战和解决方案。最后，文档提供了一些参考资料和工具链接，以帮助提高开发效率和页面性能。
More Related Content
![[译]Efficient, maintainable CSS](https://cdn.slidesharecdn.com/ss_thumbnails/efficient-091215042328-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
深入剖析浏览器
- 1. 深入剖析浏览器 浏览器/盒模型/调试工具/开发工具 函谷/拔赤 – F2E@Taobao 淘宝北京研发中心 2012-04
- 2. • Who AreWe? 淘宝前端开发工程师 http://ued.taobao.com
- 3. Topic • 浏览器合模型和兼容性 • 网页布局 • 页面的渲染原理 • 调试工具
- 4.
- 5. Hack（样式补丁） #box { color:black; /*firefox*/ color:red9; /*所有ie*/ *color:blue; /*ie7*/ _color:green; /*ie6*/ }
- 6. CSS Basic BoxModel
- 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 W3Cbox layout
- 10. IE with W3Cbox layout
- 11. IE with W3Cbox layout
- 12.
- 13. IE with Quirksbox 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>
- 16.
- 17. float:left margin-left:100px !IE6 float:left margin-left:100px IE6
- 18. This is abug!
- 19. float:left margin-left:100px Fix this display:inline bug
- 20.
- 21. div#box { background:red; filter:alpha(opacity=50); } <!DOCTYPE html> … <div id=“box”> text </div>
- 22.
- 23. div#box { background:red; filter:alpha(opacity=50); } <!DOCTYPE html> … <div id=“box”> text Div在IE6/7下默认 没有hasLayout </div>
- 24. 记住： 没有 hasLayout 的元素上 滤镜不起作用
- 25.
- 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>
- 30.
- 31.
- 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中表现正确
- 36.
- 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>
- 40.
- 41.
- 42. display: block display: inline display: inline-block;
- 43. display: block display: inline display: Hackforie7/6 inline-block; *display:inline; *zoom:1;
- 44.
- 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>
- 49.
- 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.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 67.
- 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. 在布局变化不多的页面(淘宝首页),没有使用栅格 绝对定位，简单高效
- 76.
- 77. 响应式栅格的一种尝试LessFramework.css http://lessframework.com/
- 78.
- 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>
- 95.
- 96.
- 97.
- 98. 苦逼的前端工程师 • 工程师又套乱页面了，又要检查标签配对 • 每次修改脚本，传到测试环境才看到效果 • 调试压缩后的脚本 • 根据IE丑陋的报错定位到错误位置 • 缓存总是在捣乱 • 有没有工具来批量压缩脚本 • …
- 99.
- 100.
- 102. • firefox 插件 •调试样式、布局 • debug JavaScript • 查看网络情况 • 一批基于firebug的插件扩展
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 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.
- 126.
- 127.
- 128. 保持对IE的警觉 • IE对乱码极其敏感 • 浏览器缓存是否清除 •JS代码是否通过了语法检查(JSLint) •…
- 129.
- 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 bachi@taobao.com