Inside browser

1,746 views

Published on

浏览器,架构,css,browser

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,746
On SlideShare
0
From Embeds
0
Number of Embeds
792
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Inside browser

  1. 1. 在浏览器的背后<br />
  2. 2. 架构<br />当你点击浏览的时候……<br />下载 =>产品:HTML文件<br />解析 =>产品:DOM树<br />CSS计算=>产品:渲染树<br />布局 =>产品:带位置和形状信息的渲染树<br />渲染 =>产品:可见图形<br />
  3. 3. 架构<br />我们要等下载完成之后才开始解析吗?<br />
  4. 4. 下载<br />一个HTTP库就能搞定?<br />这不是一个文件的问题<script src="JQuery.js" ></script><linkhref="All.css" type="text/css" …<imgsrc="……<iframesrc="…… <br />何时开始下载它们?<br />
  5. 5. 下载<br /><head>中的<script>和<link><br />服务端flush<br /><body>中的<script>与document.write<br />new Image<br />IE的defer属性<br />Opera的优化<br />
  6. 6. 解析<br />tokenize<br />转义符处理<br />标签匹配<br />
  7. 7. CSS计算<br />CSS选择器<br />id索引、name索引<br />优化选择符<br />保持选择符线性<br />body中的style<br />DOM树与渲染树<br />DOM树!=渲染树?<br />:before :after伪类<br />
  8. 8. 布局<br />流布局<br />display: inline/block/inline-block;float:left/right;clear:left/right/both;position:static/relative/fixed/absolute;<br />正常流、floats、绝对定位<br />display: list-item;<br />display:run-in;<br />
  9. 9. 布局<br /><ul><li>Reflow
  10. 10. floatsreflow
  11. 11. DOMreflow
  12. 12. CSS reflow
  13. 13. 改变大小(width,height,margin,padding)
  14. 14. 改变display
  15. 15. 改变position
  16. 16. 改变float
  17. 17. 改变clear</li></li></ul><li>布局<br />table布局<br />display: table/inline-table/table-row-group/table-column/table-column-group/table-header-group/table-footer-group/table-row/table-cell/table-caption <br />tablevs.div ——table布局 vs. 流布局<br />
  18. 18. 渲染<br />transform filter z-Index color visibility<br />relayout与repaint<br />display:none vs. visibility:hidden;<br />IE9的硬件加速<br />
  19. 19. 更多……<br />Script引擎<br />盒模型<br />DOMAPI实现<br />scrolling<br />overflow<br />表单元素<br />文化和语言<br />缓存<br />……<br />

×