浏览器渲染页面

1 .浏览器渲染引擎从网络层求的文档，一般情况下文档会被分成8kb的大小传输。
2 .对html进行解析。解析出Dom Tree

1.解析算法：不是使用常见的自上而下，或者是自下而上的方法进行分析。
2.解析过程需要反复。html是动态代码。例如脚本元素中的代码可能会修改html代码
3.容错机制的实现，原则上是不规范的标签也是可以显示的。
4.将文本的html文档，提炼出关键信息，嵌套层级的树形结构，便于计算扩展
5.dom树的构建是一个深度遍历的过程，及当前节点的所有子节点都构建好才会去构建当前节点的下一个兄弟节点。

3 .css解析出Style Rules

1.也是一个树形结构，根据css文件整理出来的类似dom Tree的树形结构
2.将多个css文件中的样式合并解析出具有树形结构的style Rules.

4 .将二者关联成Render Tree

1.是一个计算好样式，与html对应的tree。
2.在webkit中，解析样式和创建呈现器的过程被称为附加。每个DOM节点都由一个‘attach’方法，附加是同步进行的，将节点插入DOM树需要调用新的节点“attach”方法。
3.样式计算。浏览器的默认样式，自定义样式表，inline样式元素，html可视化属性。
4.规则的权重顺序。style-id-class-h1

5 .Layout根据render Tree计算每个节点的信息

1.通过计算渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸，将其安置在浏览器窗口的正确位置，有时我们修改了dom，可能还需要重新布局
2.对渲染树的布局分为全局和局部，全局对整个渲染树进行重新布局，局部布局可以对渲染树的某个部分进行重新布局
3.布局是一个从上到下，从内到外的递归过程，从根渲染，然后渲染下一级元素

6 .Painting:根据计算好的信息绘制整个页面

1.绘制工作是使用用户界面基础组件完成的。
2.repaint，屏幕的一部分要重画，比如某个css的背景颜色发生改变，但是元素的几何尺寸没有变。
3.reflow,元素的几何尺寸变了，我们需要重新计算render tree。
4.修改网页的字体的时候也会触发reflow。

7 .解析中出现的其他操作

1.浏览器解析文档的时候，的那个碰到js文件的时候会立即停止解析脚本，停止解析文档。如果脚本是外部的，会等待脚本下载完毕，在继续解析文档。
2.如果脚本解析在解析文档的时候请求dom样式信息，那么这里如果没有加载和解析样式，脚本就会得到错误的回复，解决的办法就是：放在样式表加载和解析的时候，禁止所有的脚本，而对于webkit浏览器，仅当脚本尝试访问样式属性可能未受到加载的样式表影响时，才会禁止该脚本。