一个 DOM 必须要操作几百次，该如何优化？

核心思路：批量操作，减少重排次数。

DocumentFragment：创建一个脱离文档流的容器，在内存中构建完所有 DOM 再一次性插入。Fragment 插入后自己会消失，只留下子节点。

javascript
const fragment = document.createDocumentFragment();
for (let i = 0; i < 500; i++) {
  const li = document.createElement('li');
  li.textContent = i;
  fragment.appendChild(li);
}
ul.appendChild(fragment); // 一次 DOM 操作

display: none：先把容器隐藏，批量改完再显示。隐藏期间的 DOM 操作不触发重排（元素不参与布局计算）。

cloneNode：克隆节点，在克隆上做修改，改完后替换原节点。

虚拟列表：不是优化 DOM 操作次数，而是减少 DOM 节点总数——几百次操作通常意味着在渲染大量数据。只渲染视口内可见的几十个元素，滚动时复用。

追问

DocumentFragment 和直接 appendChild 性能差多少？

大量操作时差几个数量级。直接 appendChild 每次操作都触发一次重排（元素加入布局树）。Fragment 里的操作不触发重排，只最后 append 时触发一次。

为什么不用 innerHTML 一次性拼接字符串？

innerHTML 确实比逐个创建 DOM 快，但有 XSS 风险（用户输入会执行脚本）。纯服务端数据可以用 innerHTML，有用户数据用 createElement + textContent。