Inside browser

1. 在浏览器的背后

2. 架构当你点击浏览的时候……下载 =>产品：HTML文件解析 =>产品：DOM树CSS计算=>产品：渲染树布局 =>产品：带位置和形状信息的渲染树渲染 =>产品：可见图形

3. 架构我们要等下载完成之后才开始解析吗？

4. 下载一个HTTP库就能搞定？这不是一个文件的问题<script src="JQuery.js" ></script><linkhref="All.css" type="text/css" …<imgsrc="……<iframesrc="…… 何时开始下载它们？

5. 下载<head>中的<script>和<link>服务端flush<body>中的<script>与document.writenew ImageIE的defer属性Opera的优化

6. 解析tokenize转义符处理标签匹配

7. CSS计算CSS选择器id索引、name索引优化选择符保持选择符线性body中的styleDOM树与渲染树DOM树！=渲染树？:before :after伪类

8. 布局流布局display: inline/block/inline-block;float:left/right;clear:left/right/both;position:static/relative/fixed/absolute;正常流、floats、绝对定位display: list-item;display:run-in;

9. 布局Reflow

10. floatsreflow

11. DOMreflow

12. CSS reflow

13. 改变大小(width,height,margin,padding)

14. 改变display

15. 改变position

16. 改变float

17. 改变clear布局table布局display: table/inline-table/table-row-group/table-column/table-column-group/table-header-group/table-footer-group/table-row/table-cell/table-caption tablevs.div ——table布局 vs. 流布局

18. 渲染transform filter z-Index color visibilityrelayout与repaintdisplay:none vs. visibility:hidden;IE9的硬件加速

19. 更多……Script引擎盒模型DOMAPI实现scrollingoverflow表单元素文化和语言缓存……

Inside browser

More Related Content

Viewers also liked (11)

Similar to Inside browser (10)

More from mysqlops (20)

Inside browser