最快的 DOM 插入答案

【问题标题】：Fastest DOM insertion最快的 DOM 插入
【发布时间】：2026-01-16 04:30:01
【问题描述】：

进行 DOM 插入的最佳实践是什么？

【问题讨论】：

我上传了一个用于合理有效地更新表的脚本：mercurial.intuxication.org/hg/js-hacks/raw-file/tip/…；要更新的表必须有一个tbody 元素；不过，使用innerHTML 可能仍然更快
有趣。我不能使用你的脚本，因为我返回预制的 html。如果我需要这样的东西，请记住这一点。另外，还有什么 js-hacks？我现在都在看他们=)
@mkoryak，关于 js-hacks：2 个月前，我开始将自己的独立脚本转储到一个 mercurial 存储库；其中一些非常有用（尤其是 capture.js），但大多数只是为了好玩......

【解决方案1】：

设置innerHTML 通常比插入单独的节点更快。

另一种可能性是create a DocumentFragment，它允许一次插入所有节点。使用 DocumentFragments 的另一个优点是它们可以很容易地成为 cloned，这可以替代 innerHTML 的许多用例，并且由于不涉及解析，因此可能更快。

【讨论】：

【解决方案2】：

innerHTML 插入比 DOM 操作 1:1 稍微快一点，并且在您实际插入多个节点和属性等的情况下获得更多，但它更容易出错和危险，因为它本质上是一个伪装的 eval 语句。

根据我的经验，这些天 JS 是如此之快，以至于 innerHTML 的速度提升并不能证明除了最大的插入/迭代批次之外的任何风险。

长话短说，您希望尽可能减少 DOM 操作，因此在创建插入层次结构时的一个技巧是在内存中相互创建它们，然后在可能的最后时刻将最高元素插入 DOM。这为浏览器留下了最少的渲染更新。当然，我们又在谈论几分之一毫秒...

【讨论】：

【解决方案3】：

innerHTML 实际上是 slower 在许多情况下然后直接 DOM 操作。在 jsperf 上查看这个 benchmark

没有“正确答案”，您必须为您的特定用例找到正确、最有效的方法

【讨论】：

【解决方案4】：

对于大块的 html，将文本分配给 innerHTML 肯定更快。虽然所有主流浏览器都支持innerHTML，但innerHTML不在w3c标准中，所以有些程序员犹豫不决。

【讨论】：

【解决方案5】：

一次完成这一切肯定更快。另请查看Steve Souder's blog 和他的book。

【讨论】：