最快的DOM插入方式

Question

最快的DOM插入方式

15

如何最佳实践地进行DOM插入？

在循环中一次性插入大块的HTML还是逐个元素逐个插入更快？
插入的HTML内容对速度有影响吗，还是只取决于块的大小？
是插入整个表格比通过使用"table hack"只插入行更快吗？

- mkoryak

我上传了一个脚本，用于实现相对高效的表格更新：http://mercurial.intuxication.org/hg/js-hacks/raw-file/tip/updatetable.js；被更新的表格必须有一个 tbody 元素；尽管使用 innerHTML 可能更快。 - Christoph

有趣。我不能使用你的脚本，因为我返回预制的HTML。不过如果我需要类似的东西，我会记住这个的。另外，有哪些JS技巧？我现在正在查看它们 =) - mkoryak

@mkoryak，关于js-hacks：2个月前，我开始将我拥有的独立脚本转储到一个mercurial存储库中；其中一些非常有用（特别是capture.js），但大多数只是为了好玩... - Christoph

5个回答

12

innerHTML 插入比 DOM 操作 1:1 稍快，当您需要实际插入多个节点和属性时，它会更加高效，但由于它本质上是一个伪 eval 语句，因此更容易出错和危险。

根据我的经验，JavaScript 速度如此之快，以至于除了最大的插入/迭代批处理外，innerHTML 的速度增益不足以证明其风险。

长话短说，您希望尽可能少地进行 DOM 操作，因此在创建要插入的层次结构时，一个提示是在内存中相互创建它们，然后在最后可能的时刻将最高元素插入到 DOM 中。这样可以使浏览器的渲染更新最少。当然，我们正在讨论毫秒级别的小数...

- annakata

我正在插入一个500KB的行块。这需要大约750毫秒，这是可以察觉到的。 - mkoryak

500k！A）这听起来不像JS是正确的工具 B）你不能将其打包成页面块吗？C）尽可能展开循环并使用innerHTML，这将为您提供较低的边界。 - annakata

2

有趣的是，对于删除节点来说，使用 innerHTML 的速度要慢得多 - http://jsperf.com/empty-an-element/4 - vsync

innerHTML插入比DOM操作稍微快一点：这完全是不正确的。 - Yair Levy

4

在许多情况下，innerHTML实际上比直接DOM操作更慢。可以查看jsperf上的基准测试

并没有“正确答案”，您需要找到适合特定用例的最有效方法。

- Yair Levy

似乎appendChild更快。 - Natalie Perret

当您插入带有属性和文本节点的元素时，差异开始缩小：jsperf.com/insertadjacenthtml-perf/32 - thdoan

1

对于大块的HTML，将文本分配给innerHTML肯定更快。虽然所有主要浏览器都支持它，但innerHTML不在w3c标准中，因此一些程序员犹豫是否使用它。

- Maurice Perry

1

一次完成肯定更快。还要查看Steve Souder的博客和他的书籍。

- Hank Gay

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christoph · Accepted Answer

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

另一个可能性是创建 DocumentFragment，它允许一次性插入所有节点。使用 DocumentFragment 的另一个优点是它们可以很容易地克隆，这可以替代大量 innerHTML 的用例，并且由于不涉及解析，因此可能更快。