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

如何优化 JavaScript 中的 DOM 操作？

本题详细解读

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 快，尤其在大量元素需要添加时。

-- -------------------- ---- -------
  --- ---- - ---
  --- ---- - - -- - - ---- ---- -
    ---- -- --------- --- - ---------
  -
  ----------------------------------------- - -----

   -- ---- ------------------
   ----- ------------- - -------------------------------
   ---------------------------------------------------

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 操作。

-- -------------------- ---- -------
-- --
-------- -------------- ------ -
    --- -------- - --
    ------ ----------------- -
      ----- --- - -----------
      -- ---- - -------- -- ------ -
        -------- - ----
        ---------------- ------
      -
    -
-
--------------------------------- ------------------- -
    -- ------
-- -----

-- --
-------- -------------- ------ -
    --- ----------
    ------ ----------------- -
        ------------------------
        --------- - ------------- -- -
          ---------------- ------
        -- ------
    -
-
--------------------------------- ------------------- -
    -- ----------
-- -----

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 操作？

推荐答案

本题详细解读

纠错反馈