一、基本概念
1.重排（重构/回流/reflow）：
当渲染树中一个或多个元素的规模尺寸，布局，隐藏等发生改变时，需要重新构建渲染树, 就会形成重排。
2.重绘（repaint或redraw）：
重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘发生在元素的可见的外观被改变，但并没有影响到布局的时候。例如，仅修改DOM元素的字体颜色、背景颜色等等
二、触发重排的场景
任何页面布局和几何属性的改变都会触发重排：
- 页面的初始化渲染(无法避免，故而每个页面至少会进行一次重排)
- 添加或删除可见的DOM元素
- 元素位置的改变，或者使用动画
- 元素尺寸的改变——大小，外边距，边框
- 浏览器窗口尺寸的变化
- 填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变
重排必定会引发重绘，但重绘不一定会引发重排
三、
如何避免频繁的触发回流和重绘
：
- 避免频繁使用 style，最好采用修改class类名的方式
- 将动画效果应用到position属性为absolute或fixed的元素上
- 可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘
- 使用createDocumentFragment进行批量的 DOM 操作
- 对于 resize、scroll 等进行防抖/节流处理。
- 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来
- 利用 CSS3 的transform、opacity、filter这些属性可以实现合成的效果，也就是GPU加速
版权声明：本文为gkx19898993699原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。