JS 如何高效批量操作 DOM？

Question

JS 如何高效批量操作 DOM？

仓乃文 · Accepted Answer

频繁操作 DOM 会触发多次重排重绘，严重影响性能。使用 DocumentFragment 可以将多次 DOM 操作合并为一次插入，减少重排次数。 DocumentFragment 方案（推荐）： ```javascript const fragment = document.createDocumentFragment(); for (let i = 0; i < 100; i++) { const li = document.createElement("li"); li.textContent = `Item ${i}`; fragment.appendChild(li); // 在内存中操作，不触发重排 } document.getElementById("list").appendChild(fragment); // 一次性插入 ``` innerHTML 批量拼接方案： ```javascript const html = Array.from({ length: 100 }, (_, i) => `

Item ${i}

`).join(""); document.getElementById("list").innerHTML = html; ``` 补充说明： - DocumentFragment 是轻量级文档对象，插入 DOM 后自动消失，只留下子节点 - 1000 条数据对比：逐个 appendChild 可能触发 1000 次重排，Fragment 只触发 1 次 - innerHTML 方案更简洁但会销毁已有子节点的事件绑定 - 超大数据量（上万条）建议使用虚拟滚动，只渲染可视区域