如何优化 JavaScript 中的 DOM 操作？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

DOM 操作的性能瓶颈主要在于浏览器需要频繁地进行重排（Reflow）和重绘（Repaint）。每一次 DOM 结构或样式的改变都可能触发浏览器重新计算布局和绘制页面。

1. 减少 DOM 操作次数

DocumentFragment: DocumentFragment 是一个轻量级的 DOM 容器，它不会被渲染到页面上。我们可以先将所有的 DOM 操作都附加到 DocumentFragment 上，最后再将 DocumentFragment 添加到文档中，这样就只进行了一次 DOM 更新，大大减少了重绘和重排的次数。
```
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i + 1}`;
  fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);
```

字符串拼接/模板字面量: 构建 HTML 字符串然后使用 innerHTML 或者 insertAdjacentHTML 一次性插入 DOM，通常比多次调用 createElement 和 appendChild 快，尤其在大量元素需要添加时。

// www.javascriptcn.com code example
  let html = '';
  for (let i = 0; i < 100; i++) {
    html += `<li>Item ${i + 1}</li>`;
  }
  document.getElementById('list').innerHTML = html;

   // 或者使用 insertAdjacentHTML
   const listContainer = document.getElementById('list')
   listContainer.insertAdjacentHTML('beforeend',html);

2. 避免频繁访问 DOM 属性

缓存 DOM 元素: 如果你多次使用同一个 DOM 元素，应先将其引用存储在一个变量中，避免重复使用 getElementById、querySelector 等方法进行 DOM 查询。
```
const element = document.getElementById('myElement');
element.style.color = 'red';
element.textContent = 'Changed Text';
```
缓存样式值: 频繁读取元素的样式也会导致性能问题。如果需要多次读取元素的样式值，可以将样式值缓存到变量中。
```
const element = document.getElementById('myElement');
const elementWidth = element.offsetWidth; // 缓存宽度
// ... 其他逻辑中用到 elementWidth
```

3. 优化事件处理

事件委托: 当有大量子元素需要添加事件监听时，将事件监听器添加到父元素上，利用事件冒泡机制来处理子元素的事件。这可以显著减少事件监听器的数量。

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  ...
</ul>

document.getElementById('list').addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log('Clicked:', event.target.textContent);
  }
});

节流和防抖: 对于如 scroll, resize, mousemove 等频繁触发的事件，可以使用节流或防抖来限制事件处理函数的执行频率，避免频繁的 DOM 操作。

// www.javascriptcn.com code example
// 节流
function throttle(func, delay) {
    let lastCall = 0;
    return function(...args) {
      const now = Date.now();
      if (now - lastCall >= delay) {
        lastCall = now;
        func.apply(this, args);
      }
    }
}
window.addEventListener('scroll', throttle(function() {
    // 处理滚动事件
}, 200))

// 防抖
function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
          func.apply(this, args);
        }, delay)
    }
}
window.addEventListener('resize', debounce(function() {
    // 处理resize事件
}, 200))

4. 选择器优化

getElementById 比 querySelector 和 querySelectorAll 快，因为它直接使用 ID 获取元素，速度最快。
querySelector 和 querySelectorAll 应该尽量精确匹配，避免使用宽泛的选择器，减少浏览器的遍历范围。
在已获取的 DOM 元素上调用 .querySelector() 和 .querySelectorAll() 而不是在 document 上调用，可以进一步减少搜索范围。

5. 批量修改样式

使用 className 或 classList 修改样式，比直接修改 style 属性效率更高，因为前者可以一次性修改多个样式，而后者每次修改都会触发重排和重绘。
```
// 推荐做法
 element.classList.add('active');
// 不推荐做法
element.style.backgroundColor = 'red';
element.style.fontSize = '16px'
```
对于简单的动画效果，优先使用 CSS 动画和过渡，浏览器对 CSS 动画的优化比 JavaScript 操作 DOM 的方式好。

如何优化 JavaScript 中的 DOM 操作？

推荐答案

本题详细解读