js怎么减少重绘和重排

减少 JavaScript 重绘和重排的方法包括：减少 DOM 操作、批量更新 DOM、使用虚拟 DOM、CSS 性能优化。

减少 DOM 操作是减少重绘和重排的一个重要方法。DOM 操作非常昂贵，因为它们会导致浏览器重新计算页面的布局和样式。因此，尽量减少对 DOM 的直接操作，可以显著提高页面的性能。使用 DocumentFragment 或者批量处理 DOM 更新，可以有效减少重排和重绘的次数。举个例子，当你需要在一个列表中添加多项内容时，可以先将这些内容添加到一个 DocumentFragment 中，最后再将整个 DocumentFragment 添加到 DOM 中，这样只会触发一次重排和重绘。

一、减少 DOM 操作

减少直接操作 DOM

直接操作 DOM 会触发浏览器的重排和重绘，影响性能。为了减少这种操作，可以使用以下方法：

缓存 DOM 引用：避免在循环中多次获取同一个 DOM 元素。
使用 DocumentFragment：将多个 DOM 操作合并为一个，减少重排和重绘次数。
批量更新 DOM：将多次更新合并为一次，例如使用 innerHTML 一次性更新内容，而不是多次调用 innerText。

使用虚拟 DOM

虚拟 DOM 是 React 等前端框架使用的一种技术，它通过在内存中创建一个虚拟 DOM 树，然后将其与实际 DOM 树进行比较，只更新有变化的部分，从而减少重排和重绘。使用虚拟 DOM 可以显著提高应用的性能，特别是在大量 DOM 操作的场景下。

二、批量更新 DOM

使用批量操作

当需要对 DOM 进行多次更新时，可以使用批量操作的方法，将这些更新合并为一次。例如：

let fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  let newItem = document.createElement('div');
  newItem.innerText = `Item ${i}`;
  fragment.appendChild(newItem);
}
document.getElementById('container').appendChild(fragment);

使用 CSS 类进行批量更新

对于需要更新样式的操作，可以通过添加或删除 CSS 类的方式进行批量更新，而不是逐个设置样式属性。例如：

let elements = document.querySelectorAll('.items');
elements.forEach(element => {
  element.classList.add('new-style');
});

三、使用 CSS 性能优化

避免使用高性能消耗的 CSS 属性

某些 CSS 属性会触发重排和重绘，例如 width、height、margin、padding 等。尽量避免频繁修改这些属性，可以通过 transform、opacity 等不会触发重排和重绘的属性来实现动画和样式变化。

使用 CSS3 动画和过渡

使用 CSS3 动画和过渡可以将动画和样式变化交给 GPU 处理，从而减少 CPU 的负担，提高性能。例如：

.element {
  transition: transform 0.3s ease-in-out;
}
.element:hover {
  transform: translateX(100px);
}

四、减少布局抖动

避免频繁读取和写入 DOM

频繁读取和写入 DOM 会导致多次重排和重绘，影响性能。可以通过将读取和写入操作分开，减少浏览器的布局计算。例如：

let width = element.offsetWidth;
element.style.width = width + 10 + 'px';

使用 requestAnimationFrame

对于需要频繁更新的操作，例如动画，可以使用 requestAnimationFrame 来进行优化。requestAnimationFrame 会在浏览器下一次重绘之前执行回调函数，从而减少重排和重绘的次数。例如：

function update() {
  element.style.transform = `translateX(${position}px)`;
  position += 1;
  requestAnimationFrame(update);
}
requestAnimationFrame(update);

五、优化事件处理

避免频繁触发事件

频繁触发事件会导致频繁的 DOM 操作，从而影响性能。可以通过节流和防抖技术减少事件触发的频率。例如：

function throttle(fn, limit) {
  let lastCall = 0;
  return function(...args) {
    const now = (new Date()).getTime();
    if (now - lastCall < limit) {
      return;
    }
    lastCall = now;
    return fn(...args);
  };
}
function handleScroll() {
  // 处理滚动事件
}
window.addEventListener('scroll', throttle(handleScroll, 100));

使用事件委托

对于大量相似的事件处理，可以使用事件委托，将事件处理程序绑定到父元素，而不是每个子元素。例如：

document.getElementById('container').addEventListener('click', function(event) {
  if (event.target.classList.contains('item')) {
    // 处理点击事件
  }
});

六、合理使用 CSS 和 JavaScript 动画

优化 CSS 动画

CSS 动画在大多数情况下比 JavaScript 动画性能更好，因为它们可以利用 GPU 加速。尽量使用 CSS 动画来实现页面的动态效果。例如：

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}
.element {
  animation: slide 1s ease-in-out;
}

使用 requestAnimationFrame 进行 JavaScript 动画

对于需要使用 JavaScript 实现的复杂动画，尽量使用 requestAnimationFrame 来优化动画效果。例如：

function animate() {
  element.style.transform = `translateX(${position}px)`;
  position += 1;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

七、避免强制同步布局

避免读取会触发重排的属性

某些 DOM 属性的读取会强制触发浏览器的重排，例如 offsetWidth、offsetHeight、scrollTop、scrollLeft 等。尽量避免在写入操作后立即读取这些属性，可以通过缓存值或使用批量操作来优化。例如：

element.style.width = '100px';
let width = element.offsetWidth; // 触发重排

使用批量操作减少重排

通过批量操作，可以减少重排的次数。例如：

element.style.width = '100px';
element.style.height = '200px';
element.style.margin = '10px';

八、使用现代开发工具进行性能分析

使用 Chrome DevTools

Chrome DevTools 提供了丰富的性能分析工具，可以帮助开发者分析页面的性能瓶颈。通过 Performance 面板，可以查看页面的重排和重绘情况，找出性能问题所在。例如：

打开 Chrome DevTools，切换到 Performance 面板。
点击 Record 按钮，开始记录性能数据。
执行页面操作，触发重排和重绘。
停止记录，分析性能数据，找出性能瓶颈。

使用 Lighthouse 进行性能评估

Lighthouse 是一个开源的自动化工具，可以帮助开发者评估页面的性能。通过 Lighthouse，可以生成详细的性能报告，包括重排和重绘的情况。使用方法如下：

打开 Chrome DevTools，切换到 Lighthouse 面板。
选择要评估的页面性能指标。
点击 Generate report 按钮，生成性能报告。
分析报告，找出性能问题，并进行优化。

九、使用合适的项目管理工具

在进行性能优化的过程中，使用合适的项目管理工具可以提高团队的协作效率。推荐使用以下两个工具：

研发项目管理系统 PingCode：PingCode 专注于研发项目管理，提供了丰富的功能，帮助团队高效管理任务、缺陷和需求，提高开发效率。
通用项目协作软件 Worktile：Worktile 是一款通用的项目协作工具，适用于各类团队和项目，提供了任务管理、时间管理、文档管理等功能，帮助团队高效协作。

十、总结

减少 JavaScript 重绘和重排是前端性能优化的重要组成部分。通过减少 DOM 操作、批量更新 DOM、使用虚拟 DOM、CSS 性能优化等方法，可以显著提高页面的性能。此外，合理使用事件处理、CSS 和 JavaScript 动画，避免强制同步布局，使用现代开发工具进行性能分析，以及使用合适的项目管理工具，都可以帮助团队更好地进行性能优化。希望本文提供的详细方法和技巧能对前端开发者有所帮助，提高页面的性能和用户体验。