浏览器渲染页面过程解析

浏览器页面解析

浏览器解析生成页面大致可分为五个步骤：

1. HTML代码转成DOM树
2. CSS代码转成CSSOM (CSS Object Model)
3. 结合DOM树和CSSOM生成 Render树（包含每个节点的视觉信息）
4. 生成布局（layout),将所有渲染树的所有节点进行平面合成
5. 将布局绘制（paint）在屏幕上。

"生成布局"（flow）和"绘制"（paint）这两步，合称为"渲染"（render）。

重排和重绘

三个因素可导致页面发生重排(重新生成布局)或者重绘（重新绘制）:

• 修改DOM
• 修改样式表
• 用户事件（比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等）

重绘不一定重排，重排必然导致重绘。