DocumentFragment使用场景详解

在日常开发中，经常需要动态添加或更新页面元素。比如做一个待办事项列表，每添加一条任务就要往页面里插入一个新节点。如果处理不当，频繁操作DOM会带来性能问题。这时候，DocumentFragment就能派上用场。

什么是DocumentFragment

DocumentFragment可以理解成一个“离线”的DOM容器。它不是真实页面的一部分，不会触发页面重排或重绘。只有当它被添加到页面时，里面的内容才会真正渲染。

批量插入元素的典型场景

假设你要往一个

，直接循环插入会导致页面连续触发100次重排，卡顿感明显。用DocumentFragment可以把所有节点先组装好，再一次性挂载。
```
const fragment = document.createDocumentFragment();
const ul = document.getElementById('taskList');

for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = '任务 ' + i;
  fragment.appendChild(li);
}

ul.appendChild(fragment); // 只触发一次重排
```
结合模板动态生成内容

有时候从接口拿到数据后要生成一组长结构的HTML，比如商品列表。与其拼接字符串再 innerHTML，不如用代码创建元素更安全。DocumentFragment适合当中间容器，把每个商品项先塞进去，最后统一上树。
```
const fragment = document.createDocumentFragment();
const container = document.querySelector('.product-list');

data.forEach(product => {
  const div = document.createElement('div');
  div.className = 'product-item';
  div.innerHTML = `
    <h3>${product.name}</h3>
    <p>价格：${product.price}元</p>
  `;
  fragment.appendChild(div);
});

container.appendChild(fragment);
```
避免重复回流的小技巧

浏览器每次读取布局信息（如offsetHeight）都可能触发回流。如果在循环中又插元素又读尺寸，性能雪崩。把所有DOM变更集中到DocumentFragment里处理，能有效减少这类问题。

实际项目中，哪怕只是插入十几个节点，用DocumentFragment也能感受到流畅度的提升。特别是移动端或低配设备上，这种优化更明显。

DocumentFragment使用场景：提升DOM操作效率的实用技巧

什么是DocumentFragment

批量插入元素的典型场景

结合模板动态生成内容

避免重复回流的小技巧