JS优化技巧：减少重绘回流提升性能

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《JS优化：减少重绘回流提升低端设备体验》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

答案：减少重绘与回流是提升移动端流畅度的核心策略。通过批量处理DOM操作、优先使用CSS的transform和opacity、分离读写操作、合理利用will-change属性，并借助Chrome开发者工具识别性能瓶颈，可有效降低浏览器渲染开销，提升低端设备体验。

在移动端，尤其是在那些配置不算出众的设备上，JavaScript代码如果频繁地触发浏览器进行“重绘”（repaint）和“回流”（reflow，也叫layout），用户体验会变得相当糟糕。简单来说，减少这些操作，就是提升低端设备流畅度的核心策略之一。它能直接影响页面响应速度、动画流畅性，让用户感觉应用“不卡”。

解决方案

要从根本上解决JS引发的重绘与回流问题，我们得理解浏览器的工作机制。每次DOM结构、元素尺寸或位置发生变化，浏览器可能就需要重新计算所有元素的位置和大小（回流），然后重新绘制受影响的部分（重绘）。而某些属性的改变，比如颜色或背景，可能只引发重绘。在低端设备上，这些计算和绘制过程会显著消耗CPU资源，导致页面卡顿、动画掉帧。

核心策略在于：

1. 批量处理DOM操作： 避免在循环中频繁读写DOM属性，这会迫使浏览器反复进行回流。更好的做法是先收集所有需要修改的数据，然后一次性地进行DOM更新。例如，使用document.createDocumentFragment()来构建复杂的DOM结构，然后一次性添加到文档中。
2. CSS属性优先： 尽可能使用CSS来处理动画和样式变化，尤其是transform和opacity这些属性。它们通常由GPU加速，并且不会触发回流，有时甚至可以避免重绘，因为它们只影响元素的“合成”阶段。
3. 分离读写操作： JavaScript中，如果你在一个操作中读取一个元素的布局属性（如offsetWidth），紧接着又修改了另一个布局属性，浏览器为了确保你读取到的是最新值，可能会立即执行回流。所以，最佳实践是先读取所有需要的布局信息，然后统一进行写入操作。
4. 利用will-change： 这个CSS属性可以提前告知浏览器，某个元素将要发生特定的变化（比如will-change: transform;），浏览器可以提前进行一些优化，例如将其提升到单独的合成层，从而在变化发生时减少回流和重绘。但要注意，滥用will-change可能会适得其反，因为它会占用更多内存。

如何有效识别并量化JavaScript代码中频繁触发的重绘与回流？

说实话，要找出具体是哪段JS代码在“捣乱”，主要还得依赖浏览器自带的开发者工具。我个人最常用的就是Chrome的Performance面板。

当你打开Performance面板，开始录制一段页面操作时，你会看到一个详细的时间轴。

• 火焰图（Flame Chart）： 这里会清晰地显示浏览器在各个阶段花费的时间。如果看到大量的“Layout”（布局）和“Paint”（绘制）事件，尤其是在你认为应该流畅的交互过程中，那这就是一个明显的信号。
• Layout Shift Regions： 在Rendering面板里，勾选“Layout Shift Regions”，页面上所有发生布局变化的区域都会以蓝色高亮显示，这能直观地告诉你哪些元素在频繁地触发回流。
• Paint Flashing： 同样在Rendering面板，勾选“Paint Flashing”，每次发生重绘的区域会以绿色高亮闪烁。如果页面在不应该有变化的时候频繁闪烁，那肯定有问题。
• Layers面板： 了解哪些元素被提升到了独立的合成层也很重要。如果一个元素本应被GPU加速，却没有被提升，那它的动画或变化可能会触发更多的CPU计算。

此外，一些现代的前端框架或库，比如React、Vue，它们通过虚拟DOM机制，在一定程度上已经替我们处理了批量更新DOM的问题，但并不是万能的。我们仍然需要关注自己手写的原生JS操作，或者那些直接操作DOM的第三方库。有时候，一些看似无害的DOM查询，比如在循环中反复获取元素的getBoundingClientRect()，都可能成为性能瓶颈。

在JavaScript层面，有哪些具体的编码实践能有效避免不必要的重绘与回流？

在JS代码层面，我们能做的优化其实很多，关键在于改变我们与DOM交互的方式。

• 集中修改，减少直接操作： 避免直接在循环中设置元素的style属性。例如，你可能想给列表中的每个项添加一个类：

  // 不推荐：每次循环都可能触发重绘/回流
  for (let i = 0; i < items.length; i++) {
      items[i].style.backgroundColor = 'red';
      items[i].style.border = '1px solid blue';
  }
  
  // 推荐：通过修改CSS类名，一次性改变多个样式
  // 假设 .highlight 类定义了背景色和边框
  for (let i = 0; i < items.length; i++) {
      items[i].classList.add('highlight');
  }

  通过操作CSS类，浏览器可以更高效地处理这些样式变化。

• 使用document.createDocumentFragment()： 当你需要添加大量DOM元素时，这是一个非常有效的策略。先在一个文档片段中构建好所有元素，然后将这个片段一次性添加到实际文档中。这只会触发一次回流和重绘。

  const fragment = document.createDocumentFragment();
  for (let i = 0; i < 100; i++) {
      const div = document.createElement('div');
      div.textContent = `Item ${i}`;
      fragment.appendChild(div);
  }
  document.body.appendChild(fragment); // 只触发一次回流

• 分离读写操作（"FastDOM"模式）： 这是一个很重要的概念。如果你需要读取一个元素的布局属性，然后根据这个值去修改另一个元素的布局属性，请确保你把所有的“读”操作放在一起，然后把所有的“写”操作放在一起。

  // 不推荐：可能导致“强制同步布局”
  const width = element.offsetWidth; // 读
  element.style.height = width + 'px'; // 写，可能强制回流以获取最新宽度
  const height = anotherElement.offsetHeight; // 读
  anotherElement.style.width = height + 'px'; // 写
  
  // 推荐：分离读写
  const width = element.offsetWidth;
  const height = anotherElement.offsetHeight; // 所有读操作完成
  
  element.style.height = width + 'px';
  anotherElement.style.width = height + 'px'; // 所有写操作完成

  通过这种方式，浏览器可以在一次回流中处理所有写入操作，而不是多次。

• 脱离文档流操作： 对于需要进行大量修改的元素，你可以先将其从文档流中移除（例如，设置display: none;或将其从父元素中暂时移除），进行所有修改，然后再重新添加到文档流中。这样，只有在移除和添加时会触发回流，中间的修改则不会。

动画效果在移动端性能优化中，应如何设计以最大程度减少重绘与回流？

动画是移动端性能的“重灾区”，因为它们通常涉及连续的、快速的样式变化。设计动画时，核心原则就是尽量避免触发布局（回流）和绘制（重绘）。

• 优先使用transform和opacity进行动画： 这是最关键的一点。transform（如translate()、scale()、rotate()）和opacity属性的动画，通常可以直接由GPU进行合成（composite），而不需要CPU进行布局计算或重新绘制像素。这意味着它们不会触发回流，甚至可以减少重绘。

  /* 推荐：使用 transform 实现位移动画 */
  .animate-element {
      transition: transform 0.3s ease-out;
  }
  .animate-element.move {
      transform: translateX(100px);
  }
  
  /* 不推荐：使用 top/left 实现位移动画，会触发回流 */
  .animate-element {
      position: relative; /* 或 absolute/fixed */
      transition: left 0.3s ease-out;
  }
  .animate-element.move {
      left: 100px;
  }

  可以看到，使用left或top进行位移动画，即使元素是position: absolute，仍然可能触发重绘，甚至回流。而transform: translate()则通常只涉及合成。

• 善用will-change属性： 如果你确定一个元素将要进行复杂的动画，可以提前给它添加will-change属性。比如，will-change: transform, opacity;。这会告诉浏览器，这个元素在不久的将来会改变这些属性，浏览器可能会提前将其提升到独立的合成层，为动画做好准备。但请记住，不要滥用，只对确实需要动画的元素使用，并且在动画结束后移除它，以释放资源。

• 使用requestAnimationFrame进行JS动画： 如果你必须使用JavaScript来控制动画（比如复杂的物理引擎动画），那么务必使用requestAnimationFrame。它能确保你的动画回调函数在浏览器下一次重绘之前执行，与浏览器的刷新率同步，从而避免不必要的帧丢失和卡顿，提供更平滑的体验。

  function animate() {
      // 更新元素位置或样式
      // ...
      requestAnimationFrame(animate);
  }
  requestAnimationFrame(animate);

• 避免动画化布局相关属性： 比如width、height、margin、padding、border等。这些属性的任何变化都会导致浏览器重新计算布局，从而触发回流，这是性能杀手。如果确实需要改变尺寸，考虑使用transform: scale()，或者通过改变CSS类名来一次性切换到新的尺寸，而不是连续动画。

总而言之，在移动端性能优化，特别是针对低端设备时，对重绘与回流的理解和控制是基石。它要求我们不仅了解JS语法，更要深入理解浏览器的工作原理，才能写出真正流畅、高效的代码。

今天关于《JS优化技巧：减少重绘回流提升性能》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！