insertAdjacentHTML 怎么比 innerHTML 快那么多？答案

【问题标题】：How is insertAdjacentHTML so much faster than innerHTML?insertAdjacentHTML 怎么比 innerHTML 快那么多？
【发布时间】：2011-11-27 05:44:18
【问题描述】：

About a month ago，Firefox 8 实现了 insertAdjacentHTML 方法，该方法与 innerHTML 一起被添加到 IE4。根据this 基准，insertAdjacentHTML 通常比 innerHTML 快一个数量级。

我假设两者都调用同一个 HTML 解析器，那么为什么会有如此显着的差异呢？ insertAdjacentHTML 是一个简单的方法调用，而 innerHTML 是一个 getter/setter，这可能会产生一些开销，但我永远不会想到这么多。

【问题讨论】：

请注意，使用appendChild 比两者都快得多。可能是因为那里不需要解析器。与appendChild 相比，insertAdjacentHTML 和innerHTML 之间的差异似乎微不足道。但是，如果您确实需要解析 html 字符串，appendChild 将无济于事。这是详细的 JSperf：jsperf.com/insertadjacenthtml-perf/28

【解决方案1】：

work.insertAdjacentHTML("BeforeEnd", "<span>test</span>"); 每次只解析一个 span，然后将小文档片段附加到 DOM。

【讨论】：

我希望一个好的浏览器能够优化work.innerHTML += "<span>test</span>" 以简单地附加到innerHTML，就像现代浏览器优化字符串连接一样。虽然我可能是错的，但如果没有浏览器供应商想到这一点，那将是令人惊讶的。
没那么容易。序列化/解析循环有许多副作用，例如重置一些节点属性和删除动态附加的事件处理程序。优化将需要精确地复制那些。浏览器制造商有更好的事情要做。 Element.innerHTML += ... 是一种在 JS 代码中很容易避免的反模式。只是不要这样做。
+1 有道理。我不同意 e.innerHTML += ... 作为反模式。有一些涉及 Ajax 的有效用途，我不明白为什么它在其他地方有害（除了速度很慢）。
@alpha123 There are some valid uses involving Ajax 你是什么意思？
e.innerHTML+=... 现在被广泛使用。在 90% 的情况下，它可以被 insertAdjacentHTML 取代，但是由于某种原因，大多数 JS 人员根本没有听说过它。现在这是一个教育问题......

【解决方案2】：

innerHTML 设置器必须在添加新子节点之前删除所有现有子节点。

不知道这是不是唯一的原因，但这肯定是一个因素。

【讨论】：