insertAdjacentHTML如何比innerHTML快得多？

Question

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

我假设两者都调用相同的HTML解析器，那么为什么差异性很大呢？ insertAdjacentHTML是一个简单的方法调用，而innerHTML是一个getter / setter，可能会有一些开销，但我绝对不会想到那么多。

Answer 1

work.innerHTML += "<span>test</span>";相当于work.innerHTML = work.innerHTML + "<span>test</span>";，即每次运行时都必须序列化work的所有现有内容，然后重新整理所有内容，再加上额外的跨度。

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

Answer 2

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

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