前言
本系列主要整理前端面试中需要掌握的知识点。本节介绍回流和重绘以及什么时候会触发。
一、什么是回流和重绘
- 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置；
- 重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制
- 浏览器解析渲染机制如下：
（1）解析HTML，生成DOM树，解析CSS，生成CSSOM树；
（2）将DOM树和CSSOM树结合，生成渲染树（Render Tree）；
（3）Layout（回流）：根据生成的渲染树，进行回流（Layout），得到节点的几何信息（位置，大小）；
（4）Painting（重绘）：根据渲染树以及回流得到的几何信息，得到节点的绝对像素；
（5）Dispaly：将像素发送给GPU，展示在页面上。
二、回流和重绘如何触发
1、触发回流
回流阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流，比如以下的情况：
- 添加或者删除可见的DOM元素；
- 元素的位置发生变化；
- 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）；
- 内容发送变化，比如文本变化或图片被另一个不同尺寸的图片所替代；
- 页面一开始渲染的时候；
- 浏览器的窗口尺寸变化（回流是根据视口的大小来计算位置和大小的）；
- 获取一些特定属性的值：offsetTop, offsetLeft, offsetWidth, scrollTop, scrollWidth, scrollHeight, clientTop, clientLeft, clientLeft, clientWidth, clientHeight。这些属性都是需要及时计算得到的，因此也会进行节流。
2、触发重绘
- 触发回流一定会触发重绘；
- 颜色的修改；
- 文本方向的修改；
- 阴影的修改。
3、浏览器优化机制
由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。
三、如何减少回流和重绘
- 如果想设定元素的样式，通过改变元素的class类名（尽可能在DOM树的最里层）；
- 避免设置多项内联样式；
- 应用元素的动画，使用postion属性中的fixed值或者absolute；
- 避免使用table布局，table里的每个元素的大小以及内容的改动，都会导致整个table的重新计算；
- 对于那些复杂的动画，对其设置postion:fixed/absolute，尽可能使元素脱离文档流，从而减少对其他元素的影响。
- 使用css3硬件加速，可以让transform, opacity, filters这些动画不会引起回流重绘；
- 避免使用CSS的JavaScript表达式。