前言

在计算机专业的学习中，掌握知识点是至关重要的。然而，仅仅听课和阅读教材可能并不足以真正理解和应用所学的内容。在这个信息爆炸的时代，我们需要更加主动和高效地学习，以提升自己在计算机领域的竞争力。而实践记录和笔记，作为学习的得力助手，能够帮助我们更好地理解知识点，加深记忆，并提供一个有组织的学习框架。我们可以不断总结和反思，发现自己的不足之处，并逐步提升自己的学习能力和解决问题的能力~让我们一起开启笔记/实践记录的学习之旅吧！

性能优化与调试技巧（一）：重绘和重排

今天我们来学习和记录一下前端性能优化与调试技巧的实战内容，这篇文章记录学习的是关于重绘和重排的内容。

什么是重绘和重排？

在前端开发中，重绘（Repaint）和重排（Reflow）是指浏览器对网页进行重新渲染时的两个关键步骤。

重绘

重绘是指当元素的样式发生改变，但不影响其布局和位置时，浏览器会重新绘制（repaint）该元素，即更新元素的外观。重绘只会涉及到页面的视觉部分，而不会改变元素在文档流中的位置。例如，改变元素的颜色、背景等只会引起重绘。

重排

重排是指当页面的布局或几何属性发生改变，需要重新计算元素的位置和大小时，浏览器会执行重排操作。重排会涉及到整个渲染流程的重新计算，包括计算布局、重新分配内存等操作。例如，改变元素的宽度、高度、添加或删除元素都会引起重排。

二者区别

重排的代价比重绘要高昂，因为它需要重新计算元素的布局和相关属性，可能影响到其他元素的位置计算，甚至导致整个文档流程的重新布局。

使用技巧

为了提高网页的性能，我们应尽量减少重绘和重排的次数。一些常见的优化措施包括：

使用 CSS3 的 transform 属性来实现动画效果，因为 transform 只会引起重绘，不会触发重排，可以提高性能。
避免频繁操作样式，最好一次性修改多个样式，或者将需要修改的样式属性合并到一个类中，然后一次性添加或移除该类。
使用文档片段（DocumentFragment）进行 DOM 操作，避免反复操作实际的 DOM 树。
使用 CSS3 的动画效果代替 JavaScript 实现的动画，因为浏览器能够对 CSS 动画进行优化，减少重排和重绘的发生。

代码实操

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: transform 0.3s ease;
    }
  </style>
</head>
<body>
  <div class="box"></div>

  <script>
    var box = document.querySelector('.box');

    function changeSizeAndColor() {
      // 使用类名合并修改样式
      box.classList.add('modified');

      // 使用 transform 属性修改尺寸和位置
      box.style.transform = 'scale(1.5)';
    }

    // 在动画结束时移除修改样式的类名
    box.addEventListener('transitionend', function() {
      box.classList.remove('modified');
    });

    // 触发修改操作
    setTimeout(changeSizeAndColor, 1000);
  </script>
</body>
</html>

在这个案例中，初始时 .box 类名下的元素是一个红色的正方形。通过 JavaScript，我们在一秒后触发了 changeSizeAndColor 函数，它会为该元素添加名为 modified 的类，并且通过设置 transform 属性来将元素放大到原来的1.5倍。

在添加 modified 类名时，元素的背景颜色并没有改变，所以只触发了重绘操作；而实际的尺寸和位置改变通过 transform 属性的修改，不影响布局，只触发了重绘操作。

这样，我们通过合并样式修改和使用 transform 属性，尽可能减少了重绘和重排的次数，提高了网页的渲染性能。

个人思考

减少 DOM 操作：频繁的 DOM 操作会导致重排和重绘的频繁发生。因此，可以尽量减少不必要的 DOM 操作，避免反复修改元素的样式或结构。
批量修改样式：在需要修改元素样式的情况下，尽量将多次修改合并为一次操作。比如，使用 CSS 类来一次性添加或移除多个样式属性，或者通过修改元素的 class 属性实现样式的切换。
使用 transform 和 opacity 属性：在实现动画效果时，可以使用 CSS 的 transform 和 opacity 属性。它们能够利用 GPU 加速来执行动画，减少重排和重绘的次数。
避免强制同步布局：在进行布局计算时，浏览器会阻塞 JavaScript 的执行。如果需要获取元素的位置或尺寸信息，最好在一次布局计算中获取所有需要的信息，避免出现多次强制同步布局。
延迟重排：如果需要对页面进行多次样式修改，可以考虑通过改变元素的 class 或使用 requestAnimationFrame() 来延迟重排的发生。这样可以让浏览器在下一次重排时一次性处理所有修改。
使用事件委托：对于大量的事件监听，可以利用事件委托的机制将事件绑定到父元素，通过事件冒泡捕获子元素的事件。这样可以减少事件处理器的数量，避免频繁的重排和重绘。

文章仅为个人学习笔记，如有错误，欢迎指正。

性能优化与调试技巧（一）：重绘和重排 | 青训营

前言