重绘和重排

• 重排(重构/回流/Reflow)：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。
• 重绘(Repaint)：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。比如改变某个元素的背景色、文字颜色、边框颜色等等

重排

1. 元素宽度、高度改变
2. 新增、删除可见dom元素
3. 元素的位置改变
4. 浏览器窗口尺寸改变
5. 填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变

---

如何避免触发回流和重绘

• 避免频繁使用 style，而是采用修改class的方式。
• 将动画效果应用到position属性为absolute或fixed的元素上。
• 也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘
• 使用createDocumentFragment进行批量的 DOM 操作。
• 对于 resize、scroll 等进行防抖/节流处理。
• 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
• 利用 CSS3 的transform、opacity、filter这些属性可以实现合成的效果，也就是GPU加速。