html - insertAdjacentHTML 为何比 innerHTML 快这么多？

Question

About a month ago之后，Firefox 8 实现了 insertAdjacentHTML 方法，该方法与 innerHTML 一起被添加到 IE4 中。根据this基准测试，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>");每次只解析一个span，然后将小文档片段附加到DOM。