网页渲染流程

浏览器渲染引擎工作流程大致分为5步： 创建DOM树 -- 创建StyleRules -- 创建Render树 -- 布局Layout（回流、重排） -- 绘制Painting（重绘）

具体如下：

1. 用HTML分析器，分析HTML元素，构建一颗DOM树（标记化和树构建）

2. 用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表

3. 将DOM树和CSS树，关联起来，生成Render树（这一过程成为Attachment），每个DOM节点都有attach方法，接收样式信息，返回一个render对象（renderer）。 这些render对象最终会被构建成一颗Render树

4. 有了Render树，浏览器开始布局，为每个Render树上节点确定一个在显示屏上出现的精确坐标

5. render树和节点显示坐标都有了，就调用每个节点paint方法，把他们绘制出来

 

注意点： 

1. DOM树是在文档加载完成后开始构建的吗？  不是， 构建DOM树是个渐进的过程，为达到更好的用户体验，渲染引擎会尽快将内容显示在屏幕上， 他不必等到整个HTML文档解析完成后才开始构建render树和布局

2. Render树是DOM树和CSSOM树构建完毕后才开始构建的吗？ 不是， 这三个过程在实际进行的时候并不是完全独立，而是会有交叉，会出现一边加载，一边渲染的情况

3. css的解析是从右向左逆向解析的（从DOM树的下向上解析，会比从上往下解析效率要高）， 嵌套标签越多，解析越慢。