关于css:重绘和重排

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