JS `document.createDocumentFragment()`：高效批量操作 DOM

各位观众老爷，大家好！今天咱们聊聊JavaScript里一个低调但实力强劲的家伙：document.createDocumentFragment()，江湖人称“文档片段”。别看名字挺长，用起来那是相当的丝滑，尤其是在需要大量操作DOM的时候，简直就是性能救星。

第一幕：DOM操作的“卡卡西”困境

咱先来回顾一下，直接操作DOM是啥感觉。假设我们需要往一个<ul>列表里添加1000个<li>元素，最直接的做法就是：

const ul = document.getElementById('myList');
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i + 1}`;
  ul.appendChild(li);
}

这段代码看起来没啥毛病，逻辑清晰，一气呵成。但是！问题就出在这个ul.appendChild(li)上。每次appendChild都会触发浏览器的重新渲染（reflow/repaint）。想象一下，你连续触发了1000次，浏览器得疯狂加班，CPU风扇呼呼作响，用户体验直接降到冰点。这就是传说中的“卡卡西”困境，查克拉（性能）消耗殆尽。

第二幕：文档片段闪亮登场

那么，有没有什么办法可以减少浏览器的重新渲染次数呢？答案就是我们的主角：document.createDocumentFragment()。

文档片段可以理解为一个轻量级的、存在于内存中的DOM容器。它不属于真实的DOM树，因此对它的任何操作都不会立即触发浏览器的重新渲染。我们可以先把所有的DOM操作都放在文档片段里，然后再一次性地把文档片段添加到真实的DOM树上。

const ul = document.getElementById('myList');
const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i + 1}`;
  fragment.appendChild(li);
}

ul.appendChild(fragment); // 一次性添加到DOM

这段代码和之前的代码几乎一样，唯一的区别就是我们使用了fragment。现在，我们只触发了一次ul.appendChild，浏览器只需要重新渲染一次，性能得到了极大的提升。

第三幕：性能对比实验

口说无凭，咱们来做个实验，看看document.createDocumentFragment()到底能提升多少性能。

操作方式	耗时 (ms)
直接appendChild	1000+
使用DocumentFragment	10-50

（请注意，实际耗时取决于你的硬件配置和浏览器版本，这里只是一个大致的范围）

可以看到，使用document.createDocumentFragment()可以极大地减少DOM操作的耗时，尤其是在需要大量操作DOM的时候。

第四幕：文档片段的“十八般武艺”

document.createDocumentFragment()不仅仅是用来批量添加元素的，它还有很多其他的用途。

批量删除元素： 我们可以先将要删除的元素移动到文档片段中，然后一次性地从DOM树中移除文档片段。
克隆DOM节点： 我们可以先将要克隆的DOM节点添加到文档片段中，然后克隆文档片段，这样就可以避免多次克隆DOM节点的开销。
insertBefore 和 replaceChild 的优化： 同样，可以先将要插入或替换的节点添加到文档片段中，然后再进行操作。

第五幕：代码示例：更复杂的场景

咱们来看一个更复杂的例子，假设我们需要根据一个数组生成一个表格，并添加到页面中。

const data = [
  { name: '张三', age: 25, city: '北京' },
  { name: '李四', age: 30, city: '上海' },
  { name: '王五', age: 28, city: '广州' },
];

const table = document.createElement('table');
const thead = document.createElement('thead');
const tbody = document.createElement('tbody');

// 创建表头
const headerRow = document.createElement('tr');
const headers = ['姓名', '年龄', '城市'];
for (const headerText of headers) {
  const th = document.createElement('th');
  th.textContent = headerText;
  headerRow.appendChild(th);
}
thead.appendChild(headerRow);

// 创建表格数据
const fragment = document.createDocumentFragment(); // 使用文档片段
for (const item of data) {
  const row = document.createElement('tr');
  const nameCell = document.createElement('td');
  nameCell.textContent = item.name;
  row.appendChild(nameCell);

  const ageCell = document.createElement('td');
  ageCell.textContent = item.age;
  row.appendChild(ageCell);

  const cityCell = document.createElement('td');
  cityCell.textContent = item.city;
  row.appendChild(cityCell);

  fragment.appendChild(row); // 添加到文档片段
}

tbody.appendChild(fragment); // 一次性添加到tbody

table.appendChild(thead);
table.appendChild(tbody);

document.body.appendChild(table); // 将表格添加到页面中

在这个例子中，我们使用了document.createDocumentFragment()来批量创建表格的行，有效地提升了性能。

第六幕：注意事项和最佳实践

不要过度使用： 虽然document.createDocumentFragment()可以提升性能，但是也不是所有场景都需要使用。只有在需要大量操作DOM的时候，才能体现出它的优势。
及时释放内存： 虽然文档片段存在于内存中，但是如果长时间不使用，也应该及时释放内存，避免内存泄漏。一般情况下，在 appendChild 到实际 DOM 后，fragment 对象就可以被垃圾回收了。
配合虚拟DOM： 在现代前端框架中，虚拟DOM已经成为了标配。虚拟DOM可以有效地减少DOM操作的次数，因此在使用虚拟DOM的时候，document.createDocumentFragment()的作用可能会被削弱。但是，在一些特定的场景下，例如需要手动操作DOM的时候，document.createDocumentFragment()仍然可以发挥作用。
兼容性： document.createDocumentFragment() 具有良好的浏览器兼容性，几乎所有的现代浏览器都支持它。

第七幕：更高级的用法：Web Components

在Web Components中，document.createDocumentFragment()经常被用来创建组件的shadow DOM。Shadow DOM是一种封装技术，可以把组件的内部实现隐藏起来，避免与外部的CSS和JavaScript产生冲突。

class MyComponent extends HTMLElement {
  constructor() {
    super();

    // 创建 shadow DOM
    const shadow = this.attachShadow({ mode: 'open' });

    // 创建模板
    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        p {
          color: blue;
        }
      </style>
      <p>Hello, world!</p>
    `;

    // 将模板添加到 shadow DOM
    shadow.appendChild(template.content.cloneNode(true));
  }
}

customElements.define('my-component', MyComponent);

在这个例子中，我们使用了document.createElement('template')来创建模板，并将模板的内容添加到shadow DOM中。template.content实际上就是一个documentFragment，它包含了模板的所有DOM节点。通过使用shadow DOM，我们可以将组件的样式和行为封装起来，避免与外部的样式和行为产生冲突。

第八幕：与其他优化手段的配合

document.createDocumentFragment() 并非解决所有性能问题的银弹。它可以很好地配合其他优化手段，例如：

节流 (Throttling) 和防抖 (Debouncing): 限制DOM操作的频率。
虚拟 DOM (Virtual DOM): 框架层面的优化，减少实际的DOM操作。
CSS优化: 避免昂贵的CSS属性（例如box-shadow），减少重绘和重排。
图片优化: 使用适当的图片格式和压缩技术。

第九幕：总结与展望

document.createDocumentFragment() 是一个非常实用的API，可以有效地提升DOM操作的性能。掌握它的使用方法，可以让你在开发高性能的Web应用时更加得心应手。

记住，性能优化是一个持续的过程，需要不断地学习和实践。希望今天的分享能够对你有所帮助。

总而言之，document.createDocumentFragment()就像一个默默无闻的老黄牛，埋头苦干，却能带来巨大的性能提升。下次需要大量操作DOM的时候，记得带上它！

今天的讲座就到这里，谢谢大家！咱们下期再见！

发表回复 取消回复

发表回复取消回复