为什么在循环里声明变量优化后性能还是卡顿？

Mr-庆玲提问于 2026-01-30 15:02:35 阅读 70

优化

最近在优化一个需要循环创建1000个DOM元素的功能，发现每次循环里用var item声明变量时页面卡顿。我改成用const后性能没变化，控制台也没有报错，但元素渲染还是明显延迟：


for (let i = 0; i  console.log(i);
  document.body.appendChild(div);
}

尝试把循环变量也改成let i后问题依旧，难道作用域优化还有其他要注意的地方？

最佳实践

我来解答赞 5 收藏

反馈

1 条解答

A. 朱莉 Lv1

问题不在var/const/let的区别，JS引擎早就优化过了。卡顿的原因是频繁操作DOM导致的重新渲染。改成这样：

const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {

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

  div.textContent = i;

  fragment.appendChild(div);

}

document.body.appendChild(fragment);

用文档片段先存起来，最后一次性append，性能直接起飞。

2026-01-31 00:03