循环里频繁操作DOM真的会影响性能吗？

❤文雯提问于 2026-03-19 19:28:20 阅读 23

优化

最近在做一个动态列表渲染的功能，发现页面有点卡。我是在for循环里直接用element.innerHTML += item不断拼接内容的，听说这样性能很差，但不太确定具体原因。

试过把HTML先拼成字符串再一次性赋值，确实快了不少，但想搞清楚为什么循环里操作DOM就这么慢？有没有更优雅的优化方式？

let list = document.getElementById('list');
for (let i = 0; i < items.length; i++) {
  list.innerHTML += <li>${items[i]}</li>;
}

我来解答赞 3 收藏

反馈

1 条解答

技术慧丽 Lv1

每次 innerHTML += 都会触发浏览器重新解析HTML并重建DOM树，循环100次就解析100次，能不快吗？

直接用 DocumentFragment 或者数组join：

// 方案1：DocumentFragment（最优雅）

let list = document.getElementById('list');

let frag = document.createDocumentFragment();

for (let i = 0; i < items.length; i++) {

  let li = document.createElement('li');

  li.textContent = items[i];

  frag.appendChild(li);

}

list.appendChild(frag);



// 方案2：数组join

let list = document.getElementById('list');

list.innerHTML = items.map(item => ${item}).join('');

DocumentFragment 是内存中的临时节点，append的时候不会触发重排，比你 innerHTML 赋值还快。

2026-03-19 20:04