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

FSD-茜茜提问于 2026-02-27 21:18:22 阅读 12

优化

我最近在做一个动态列表渲染的功能，发现页面有点卡。看了一下代码，是在for循环里不断用element.appendChild()往页面加元素。这样写是不是有问题？

我试过把节点先拼成字符串再一次性插入，但结构复杂后维护起来很麻烦。有没有更优雅的优化方式？比如用DocumentFragment？

for (let i = 0; i < items.length; i++) {
  const li = document.createElement('li');
  li.textContent = items[i];
  listContainer.appendChild(li); // 每次都触发重排？
}

我来解答赞 5 收藏

反馈

1 条解答

司马钰浩 Lv1

确实会影响性能，每次appendChild都会触发重排，循环里搞几百次页面不卡才怪。用DocumentFragment一次性插入，应该能解决你的问题。

const fragment = document.createDocumentFragment();

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

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

  li.textContent = items[i];

  fragment.appendChild(li); // 先往fragment里加，不触发重排

}

listContainer.appendChild(fragment); // 最后一次性插入

这样只触发一次重排，代码结构也清晰，不用拼字符串那么恶心。凌晨三点了，早点改完早点睡...

2026-02-28 17:06