回流和重绘

在网页性能优化中，避免频繁的回流（reflow）和重绘（repaint）是非常重要的。回流和重绘会影响页面的性能和响应速度，特别是在复杂或大型页面中。这些过程会导致浏览器重新计算布局和重新绘制页面部分或全部内容。以下是一些策略来避免或最小化回流和重绘：

回流和重绘的定义

• 回流（Reflow）：也称为重排（relayout），是指元素的几何属性（如尺寸、位置、边距等）发生变化时，浏览器需要重新计算页面布局的过程。
• 重绘（Repaint）：是指元素的外观（如颜色、背景、阴影等）发生变化，但不影响布局时，浏览器重新绘制元素的过程。

如何避免回流和重绘

1. 批量更新DOM：

   • 尽可能减少对DOM的频繁操作，可以将多次对DOM的修改合并成一次操作。例如，使用文档片段（DocumentFragment）批量插入多个元素。

   const fragment = document.createDocumentFragment();
   for (let i = 0; i < 1000; i++) {
       const newDiv = document.createElement('div');
       newDiv.textContent = `This is div ${i}`;
       fragment.appendChild(newDiv);
   }
   document.body.appendChild(fragment);
   

2. 减少DOM访问：

   • 访问DOM是一个相对昂贵的操作。尽量减少访问DOM的次数，并将需要多次访问的DOM元素存储在变量中。

   const myElement = document.getElementById('myElement');
   myElement.style.width = '100px';
   myElement.style.height = '100px';
   

3. 使用CSS类而不是直接操作样式：

   • 避免通过JavaScript直接修改元素的样式属性。相反，可以通过切换CSS类来改变样式，这样可以减少回流和重绘。

   myElement.classList.add('new-style');
   

4. 避免触发同步布局：

   • 避免使用会触发同步布局的属性和方法，如 offsetWidth, offsetHeight, offsetTop, offsetLeft, scrollTop, scrollLeft, clientWidth, clientHeight 等。这些属性和方法会强制浏览器进行回流来获取最新的布局信息。

   // 避免立即读取和写入布局属性
   const width = myElement.offsetWidth;
   myElement.style.width = width + 'px';
   

5. 使用CSS动画而不是JavaScript动画：

   • CSS动画和过渡通常比JavaScript动画更高效，因为它们可以利用浏览器的优化和硬件加速。

   .animate {
       transition: transform 0.5s ease;
   }
   .animate-active {
       transform: translateX(100px);
   }
   

6. 优化复杂的动画和过渡：

   • 避免在复杂的布局上使用动画，特别是那些需要频繁回流的属性（如 width, height, margin, padding, top, left 等）。可以使用 transform 和 opacity 进行动画，这些属性不会触发回流。

   .move {
       transform: translateX(0);
       transition: transform 0.5s ease;
   }
   .move-active {
       transform: translateX(100px);
   }
   

7. 利用 will-change 属性：

   • 通过使用 will-change 提前告知浏览器某些元素将要发生变化，可以使浏览器为这些变化做出优化准备。

   .animate {
       will-change: transform;
   }
   

8. 避免表格布局的频繁更改：

   • 表格布局的回流成本较高，尽量减少对表格元素的频繁修改。

9. 脱离文档流操作：

   • 在操作DOM时，将元素脱离文档流（例如设置为 display: none），操作完成后再将其恢复，这样可以减少多次回流和重绘。

   myElement.style.display = 'none';
   // 执行多次DOM操作
   myElement.style.display = 'block';
   

通过采用这些技术，可以显著减少回流和重绘的频率，从而提高页面的性能和响应速度。