浏览器的渲染机制、重绘回流、以及前端性能优化

浏览器的渲染机制、重绘回流、以及前端性能优化"/>

浏览器的渲染机制、重绘回流、以及前端性能优化

浏览器的渲染机制

这里先借用周啸天老师的一张图来大致描述浏览器的渲染机制

即浏览器渲染页面的步骤分为五步：

1. 处理HTML标记并构造DOM树
2. 处理CSS并构建CSSOM树
3. 将DOM和CSSOM组合成一个Render树
4. 根据构建的渲染树，开始布局。（布局是确定呈现树中所有节点的宽度、高度和位置。渲染树标识显示哪些节点（即使不可见）及其计算样式，但不标识每个节点的尺寸或位置。为了确定每个对象的确切大小和位置，浏览器从渲染树的根开始遍历它。
   第一次确定节点的大小和位置称为布局，随后对节点大小和位置的重新计算称为回流。假设初始布局发生在返回请求的图像资源之前，并且由于没有声明图像的大小，因此一旦请求到图像资源，知道图像大小后，就会有回流。
5. 将各个节点绘制到屏幕上。绘制包括将元素的每个可视部分绘制到屏幕上，包括文本、颜色、边框、阴影和替换的元素（如按钮和图像）。

重绘回流

重绘：元素样式的更改（但不影响大小和位置）将会发生重绘。

• 比如颜色color的变化会导致重绘。

回流：元素的位置或大小发生了变化，将会发生回流。