重绘和重排

• 重排(重构/回流/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加速。