批量 DOM 操作：Fragment 与 `innerHTML` 的性能优势

批量 DOM 操作：Fragment 与 `innerHTML` 的性能优势——一场“效率至上”的华山论剑！

各位观众老爷们，大家好！我是江湖人称“码农界段子手”的程序猿小码！今天，咱们不聊风花雪月，也不谈情情爱爱，咱们来聊聊前端开发中一个相当重要，却又常常被忽略的性能优化话题：批量 DOM 操作。

想象一下，你是一位盖世英雄，准备在网页上展示你收集到的1000件绝世神兵。你当然不能一把一把地往外掏，那样效率太低，还会闪着腰。你需要一个高效的“神器展示方案”。同样的道理，在前端开发中，我们需要高效地操作 DOM 元素，尤其是在需要大量操作的时候。

今天，我们就来一场“效率至上”的华山论剑，对比一下两种常见的批量 DOM 操作方法：DocumentFragment（文档片段） 和 innerHTML，看看谁才是真正的效率王者！

第一回：`innerHTML`——简单粗暴，却也暗藏玄机

首先，我们请出第一位选手：innerHTML。这位老兄，就像武林中的大力金刚掌，简单粗暴，一掌下去，摧枯拉朽！

innerHTML 允许我们直接使用 HTML 字符串来替换或添加元素的内容。这就像我们直接把1000件神兵打包成一个巨大的包裹，然后“嘭”的一声扔到展示台上。

优点：

简单易用： 这绝对是 innerHTML 最大的优势。代码简洁明了，几行代码就能搞定复杂的 DOM 操作。
代码量少： 相对于其他方法，innerHTML 的代码量确实少很多，对于快速开发来说，非常友好。

缺点：

性能问题： 这才是我们今天讨论的重点！每次使用 innerHTML，浏览器都需要解析 HTML 字符串，然后重新渲染整个元素及其子元素。这就好比，每次扔包裹，都要重新整理展示台，把原来的东西搬走，再把新东西摆好。这可是相当耗时的！
安全风险： innerHTML 容易受到 XSS 攻击。如果 HTML 字符串中包含恶意脚本，那么你的网页就危险了！
事件监听丢失： 使用 innerHTML 替换元素，会移除该元素及其子元素上绑定的所有事件监听器。这就好比，你把展示台上的神兵都换了，原来守卫神兵的士兵也跟着消失了！

示例代码：

const container = document.getElementById('container');
let htmlString = '';

for (let i = 0; i < 1000; i++) {
  htmlString += `<div>神兵 ${i + 1}</div>`;
}

container.innerHTML = htmlString; // 简单粗暴！

表格总结：

特性	`innerHTML`
优点	简单易用，代码量少
缺点	性能问题，安全风险，事件监听丢失
适用场景	少量 DOM 操作，对性能要求不高

第二回：DocumentFragment——不动声色，却也运筹帷幄

接下来，我们请出第二位选手：DocumentFragment。这位老兄，就像武林中的太极拳，以柔克刚，四两拨千斤！

DocumentFragment 是一个轻量级的 DOM 结构，它存在于内存中，不会直接影响页面渲染。我们可以把要添加的元素先添加到 DocumentFragment 中，然后一次性地将 DocumentFragment 添加到 DOM 树中。

这就好比，我们先在一个秘密基地里，把1000件神兵按照顺序摆好，然后再一次性地把整个秘密基地搬到展示台上。这样，展示台只需要渲染一次，效率自然就高了！

优点：

性能优势： 这是 DocumentFragment 最大的优势！由于 DocumentFragment 在内存中操作，不会触发多次页面渲染，因此性能比 innerHTML 高得多。
安全： DocumentFragment 不会解析 HTML 字符串，因此不存在 XSS 攻击的风险。
保留事件监听： 使用 DocumentFragment 添加元素，不会移除已绑定的事件监听器。

缺点：

代码稍显复杂： 相对于 innerHTML，DocumentFragment 的代码稍微复杂一些。
需要更多代码量： 使用 DocumentFragment 需要更多的代码，尤其是在需要创建复杂 DOM 结构时。

示例代码：

const container = document.getElementById('container');
const fragment = document.createDocumentFragment(); // 创建文档片段

for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = `神兵 ${i + 1}`;
  fragment.appendChild(div); // 将元素添加到文档片段
}

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

表格总结：

特性	DocumentFragment
优点	性能优势，安全，保留事件监听
缺点	代码稍显复杂，需要更多代码量
适用场景	大量 DOM 操作，对性能要求高

第三回：实战演练——真金不怕火炼！

理论讲得再多，不如实战演练一番！咱们来做一个简单的实验，分别使用 innerHTML 和 DocumentFragment 来添加 10000 个 div 元素，看看谁的速度更快！

代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>innerHTML vs DocumentFragment</title>
</head>
<body>
  <div id="container1"></div>
  <div id="container2"></div>

  <script>
    const container1 = document.getElementById('container1');
    const container2 = document.getElementById('container2');

    // 使用 innerHTML
    console.time('innerHTML');
    let htmlString = '';
    for (let i = 0; i < 10000; i++) {
      htmlString += `<div>innerHTML ${i + 1}</div>`;
    }
    container1.innerHTML = htmlString;
    console.timeEnd('innerHTML');

    // 使用 DocumentFragment
    console.time('DocumentFragment');
    const fragment = document.createDocumentFragment();
    for (let i = 0; i < 10000; i++) {
      const div = document.createElement('div');
      div.textContent = `DocumentFragment ${i + 1}`;
      fragment.appendChild(div);
    }
    container2.appendChild(fragment);
    console.timeEnd('DocumentFragment');
  </script>
</body>
</html>

运行这段代码，你会发现，DocumentFragment 的速度明显快于 innerHTML！尤其是在数量级较大的情况下，DocumentFragment 的优势更加明显！

实验结果（仅供参考，具体结果取决于你的电脑配置）：

innerHTML: 200ms – 500ms
DocumentFragment: 5ms – 20ms

看到这个结果，相信大家已经明白了 DocumentFragment 的威力！

第四回：`innerHTML` 的优化之道——并非一无是处！

难道 innerHTML 就真的毫无用处了吗？当然不是！innerHTML 也有它的优化之道！

减少 innerHTML 的使用次数： 尽量避免在循环中使用 innerHTML。如果必须使用，可以先将 HTML 字符串拼接好，然后一次性地赋值给 innerHTML。
使用模板字符串： 使用模板字符串可以避免手动拼接 HTML 字符串，提高代码的可读性和可维护性。
避免重复渲染： 尽量避免修改已经渲染过的元素。如果需要修改，可以先将元素隐藏，修改完成后再显示出来。

优化后的 innerHTML 代码示例：

const container = document.getElementById('container');
const data = Array.from({ length: 10000 }, (_, i) => `神兵 ${i + 1}`); // 使用 Array.from 创建数据

console.time('innerHTML - optimized');
const htmlString = data.map(item => `<div>${item}</div>`).join(''); // 使用 map 和 join 创建 HTML 字符串
container.innerHTML = htmlString;
console.timeEnd('innerHTML - optimized');

通过这些优化，我们可以显著提高 innerHTML 的性能。

第五回：其他方案——百花齐放，各显神通！

除了 innerHTML 和 DocumentFragment，还有一些其他的批量 DOM 操作方案，例如：

虚拟 DOM： 虚拟 DOM 是一种将 DOM 结构保存在内存中的技术。通过比较虚拟 DOM 的差异，可以最小化对真实 DOM 的操作，从而提高性能。React、Vue 等框架都使用了虚拟 DOM 技术。
Web Components： Web Components 允许我们创建可重用的自定义 HTML 元素。通过 Web Components，我们可以将复杂的 DOM 结构封装起来，提高代码的可维护性和可重用性。
requestAnimationFrame： requestAnimationFrame 允许我们在浏览器重绘之前执行动画。通过使用 requestAnimationFrame，我们可以避免在短时间内进行大量的 DOM 操作，从而提高性能。

这些方案各有优缺点，适用于不同的场景。

总结：选择最适合你的“神兵利器”！

好了，经过一番激烈的“华山论剑”，相信大家对批量 DOM 操作有了更深入的了解。

innerHTML 简单易用，适合少量 DOM 操作，但性能较差，存在安全风险。

DocumentFragment 性能优越，安全可靠，适合大量 DOM 操作，但代码稍显复杂。

虚拟 DOM、Web Components、requestAnimationFrame 等方案各有优缺点，适用于不同的场景。

选择哪种方案，取决于你的具体需求。就像选择神兵利器一样，没有绝对的好坏，只有最适合你的！

希望今天的分享对你有所帮助！下次再见！👋