Your SlideShare is downloading. ×
0
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
深入剖析浏览器
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

深入剖析浏览器

81,353

Published on

淘宝UED前端培训课程

淘宝UED前端培训课程

Published in: Technology, Design
12 Comments
160 Likes
Statistics
Notes
  • 很好很强大!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 值得看一下
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 浏览器/盒模型/调试工具/开发工具
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • that's great
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 很好的资料,后端开发也可以看看
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
81,353
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
1,923
Comments
12
Likes
160
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

×