一 开发中如何避免重绘(Repaint)和回流(Reflow)?#

在前端开发中，避免重绘（Repaint）和回流（Reflow）是提高网页性能的关键策略。以下是一些有效的实践方法：

1. 批量修改样式：尽量减少对DOM样式属性的单独修改，可以的话，将多个样式更改合并为一次操作，或将样式更改应用到一个类名上，然后一次性更改元素的类名。

2. 使用CSS3动画和过渡：利用CSS的transition和animation代替JavaScript来实现动画效果，因为CSS动画可以由浏览器的合成线程处理，不会触发回流。

3. 避免频繁查询布局信息：减少使用offsetWidth、offsetHeight、getComputedStyle等方法的频率，因为这些操作会触发浏览器重新计算样式和布局，从而导致回流。

4. 文档片段：当需要批量添加或修改DOM节点时，先使用DocumentFragment创建一个子文档，完成所有修改后，再将整个片段添加到文档中，这样只会触发一次回流。

5. 合理使用定位：使用position: absolute或position: fixed的元素不会影响其他元素的布局，因此修改这些元素的样式不会触发回流。

6. 避免使用表格布局：表格结构容易因内容变化而频繁触发回流，考虑使用Flexbox或Grid布局替代。

7. 隐藏操作元素：在进行大规模的DOM操作前，可以先将元素设置为display: none，操作完成后，再显示，这样只需在开始和结束时触发两次回流。

8. 优化读写操作顺序：尽量先进行所有的DOM读取操作，之后再进行写入操作，减少样式和布局的重复计算。

9. 避免使用CSS表达式：CSS表达式会在每次页面渲染时计算，可能导致不必要的回流和重绘。

10. 硬件加速：对于复杂的动画或变换，使用transform和opacity等可以触发硬件加速的CSS属性，这些操作在合成层进行，不会影响布局流。

11. 合理设置will-change属性：在某些情况下，预测哪些属性将会改变，并使用will-change告知浏览器，可以提前做好优化准备，但需谨慎使用，以避免不必要的性能开销。