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

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

优化

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


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

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

最佳实践

我来解答赞 5 收藏

反馈

2 条解答

Dev · 欢欢 Lv1

你这个问题其实根本不是变量声明方式的问题，卡顿的锅不在 var / let / const 上，而是你在循环里频繁操作 DOM。

每次 document.body.appendChild(div) 都会触发浏览器的重排（reflow）和重绘（repaint），1000 次就是 1000 次重排重绘，CPU 和 GPU 都得累死。你就算把变量全改成 const，甚至用 Object.create(null) 创建对象，只要 DOM 操作还在循环里逐个插，卡顿就躲不掉。

真正要做的优化是：批量操作 DOM。比如先用文档碎片 DocumentFragment 把所有元素挂上去，最后一次性插进页面：

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);

或者干脆把 HTML 拼成字符串，最后一次性 innerHTML 插入，性能能提几个数量级。

至于变量声明，现在 ES6+ 里用 let / const 是没错，但对性能影响微乎其微——浏览器引擎早就对这种语法糖优化得飞起了，你这点循环根本触发不了 JIT 的热点优化瓶颈。真要卡，八成是 I/O（这里 DOM 就是 I/O）拖的后腿。

顺带说一句，如果这玩意真要服务端渲染，直接后端生成 HTML 片段返回，前端直接 innerHTML 塞进去，连 DOM 创建都省了，体验立马丝滑。

2026-02-24 19:23

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