浏览器优化: 驯服重绘、重排，提升 JS 性能

前端

2024-02-22 16:43:40

当网页首次呈现时，它经历了一个渲染过程，其中 DOM 节点转换为可视输出。然而，在用户交互或其他事件期间，网页可能需要进行多次重新渲染，这可能会对性能造成负面影响。

重绘是指更改元素的外观而无需更改其布局，例如修改颜色或字体。重排，另一方面，涉及更改元素的布局或大小，例如添加或删除元素或调整其尺寸。

频繁的重绘和重排会严重影响网页的性能，导致延迟和卡顿。为了优化浏览器性能，至关重要的是了解导致这些问题的因素并实施适当的策略。

导致重绘和重排的因素

频繁的 DOM 操作： 使用 document.querySelector()、document.getElementById() 或 innerHTML 等方法对 DOM 进行频繁的修改会导致重绘和重排。
CSS 样式更改： 在运行时更改元素的样式可能会触发重排或重绘，具体取决于更改的属性。
JavaScript 动画： 使用 JavaScript 执行动画（例如，使用 requestAnimationFrame()）可能会导致频繁的重绘，因为浏览器会尝试在每次帧中更新元素的位置或外观。
布局计算： 当浏览器需要计算元素的布局（例如，当窗口大小发生变化时）时，可能会触发重排。

优化浏览器的策略

1. 减少 DOM 操作： 尽可能减少对 DOM 进行的修改次数。使用缓存机制或批处理技术将多个 DOM 操作合并在一起。

2. 优化 CSS 样式： 使用 CSS 预处理器（例如 Sass 或 Less）来优化 CSS 代码，并避免在运行时进行不必要的样式更改。

3. 使用硬件加速： 启用硬件加速可以将 GPU 用于重绘和重排操作，从而提高性能。可以在 Chrome 开发者工具中启用硬件加速。

4. 使用 requestAnimationFrame()： 对于 JavaScript 动画，使用 requestAnimationFrame() 而不是 setInterval() 或 setTimeout()。requestAnimationFrame() 确保动画在浏览器帧速率的上下文中执行，从而避免不必要的重绘。

5. 使用 CSS 变换： 使用 CSS 变换而不是 JavaScript 来执行动画，因为变换不会触发重排。

6. 优化布局： 优化网页布局以减少重新计算布局的需要。使用 flexbox 或网格布局系统，并避免使用浮动。