浏览器的渲染流程

一、浏览器构建对象模型(JavaScript,HTML,Style)：

构建DOM对象：

1. 下载HTML文档，读取文本，将文本转换为单个的字符。 
2. 通过标签识别出节点对象，将节点对象构建为DOM树。

构建CSSOM对象：

1. CSS同理，通过识别CSS文本形成CSSOM

构建渲染树：

1. 浏览器根据DOM树和CSS树构建渲染树

 二、布局和绘制(Layout,Paint,开销最高）

布局的特性：

渲染树只包含网页需要的节点，而布局计算每个节点精确的大爱小和位置（盒子模型）。

布局只关心 位置 和 大小 。

什么时候需要布局进行重绘（回流 reflow）？

1. 添加/删除元素
2. 操作style
3. display:none
4. offSetLeft、scrollTop、clientWidth
5. 移动元素位置
6. 修改浏览器大小、字体大小