5.浏览器原理之浏览器渲染

1.回流和重绘

1) 回流（reflow），也叫重排

定义：元素的大小或者位置发生了变化（当页面的布局和几何信息发生改变的时候）触发了重新布局，导致渲染树重新计算布局和渲染。
下面展示一些会导致回流的情况：

• 添加或删除可见的dom元素
• 元素的位置发生变化
• 元素的尺寸发生变化
• 页面一开始渲染的时候
• 因为回流是根据视口的大小来计算元素的位置和大小的，所以浏览器的窗口尺寸变化也会引发回流。

2）重绘（repaint）

定义：元素样式的改变（但宽高，大小，位置等不变）
如：outline,visibility,color,background-color
注意一点：回流一定触发重绘，但是重绘不一定触发回流。

2.浏览器的渲染过程

浏览器渲染主要有以下的步骤：

1. 解析html文档构建 一个DOM树
2. 然后对CSS进行解析，生成CSSOM（CSS Object Model）规则树
3. 根据DOM树和CSSOM规则树构建渲染树
4. 布局阶段（layout）：根据生成的渲染树，计算它们在设备视口（viewport)内的准确位置和大小，这个计算阶段就是回流。
5. 绘制阶段（painting）：将渲染树的各个节点绘制到屏幕上。