DOM 插入性能基准测试 - innerHTML vs createElement vs DocumentFragment

innerHTML：通过设置元素的 HTML 字符串来批量插入内容。浏览器需要解析 HTML 字符串并构建 DOM 树。优点是代码简洁，适合静态内容批量插入；缺点是会替换原有内容，有 XSS 安全风险，且 HTML 解析有额外开销。

createElement：使用 document.createElement() 逐个创建 DOM 节点，再通过 appendChild() 添加到 DOM。每次 appendChild 都可能触发浏览器回流（reflow），大量操作时性能较差。但灵活性最高，可精确控制每个节点的属性和事件。

DocumentFragment：创建一个文档片段作为"离线容器"，在其中构建完整的 DOM 结构后，一次性插入到文档中。只触发一次回流，兼顾了灵活性和性能，是大量 DOM 插入的最佳实践。

核心原因在于浏览器回流（reflow）机制。当使用 createElement + appendChild 逐个插入元素时，每次插入都会触发一次回流计算，浏览器需要重新计算布局。插入 1000 个元素就会触发约 1000 次回流。

而 DocumentFragment 在内存中构建完整的 DOM 子树，最后一次性 appendChild 到文档中，只触发一次回流。这大幅减少了浏览器的布局计算开销，在大量元素插入时性能优势尤为明显（通常是 createElement 的 2-5 倍）。

当插入非常简单的纯文本结构且元素数量适中时，innerHTML 可能略快于 DocumentFragment。因为浏览器对 HTML 解析器做了大量优化（尤其是 WebKit/Blink 引擎），解析简单 HTML 字符串的速度极快。

但在元素结构复杂（深层嵌套、多属性）或需要绑定事件时，DocumentFragment 的优势就会显现。此外，innerHTML 的安全性问题（XSS 风险）也需要注意——如果内容包含用户输入，务必进行转义处理。

• 浏览器类型和版本：Chrome、Firefox、Safari 的渲染引擎不同，结果可能有显著差异。
• 设备性能：CPU 和内存直接影响 DOM 操作速度。
• 元素复杂度：嵌套层级深、属性多的元素构建更耗时。
• 当前页面状态：页面已有的 DOM 规模、CSS 规则数量、是否有动画运行等都会影响回流成本。
• JIT 预热：JavaScript 引擎需要预热才能达到最佳性能，因此建议多轮测试取平均值。

根据场景选择：

• 少量元素（<50）：三种方法差异不大，选择最简洁的即可。
• 大量静态内容：优先使用 DocumentFragment 或 innerHTML（注意安全）。
• 需要绑定事件或设置属性：使用 createElement + DocumentFragment 组合，先创建元素并绑定事件，添加到 fragment，最后一次性插入。
• 模板渲染：现代框架（React、Vue）内部已优化 DOM 更新策略，通常使用虚拟 DOM + 批量更新，开发者无需手动选择。
• 安全敏感场景：避免使用 innerHTML 插入未经验证的用户内容，防止 XSS 攻击。

回流（Reflow）：当 DOM 结构发生变化（添加/删除元素、修改尺寸），浏览器需要重新计算元素的几何位置和布局。回流成本较高，可能引发连锁计算。

重绘（Repaint）：元素的外观改变（颜色、背景等）但不影响布局时，浏览器只需重新绘制该元素。重绘成本低于回流。

频繁的 DOM 插入操作会触发大量回流，这是 createElement 逐个插入性能较差的根本原因。使用 DocumentFragment 或 innerHTML 可以批量更新，将多次回流合并为一次。