insertAdjacentHTML如何比innerHTML快得多？

Question

大约一个月前,Firefox 8实现了insertAdjacentHTML方法,该方法与innerHTML一起被添加到IE4中.根据此基准测试,insertAdjacentHTML通常比innerHTML快一个数量级.

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

Answer 1

work.innerHTML += "test";相当于work.innerHTML = work.innerHTML + "test";,即每次运行它必须序列化所有现有的内容,work然后重新整理整批,加上额外的跨度.

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

这并不容易.序列化/解析周期有许多副作用,例如重置某些节点属性和删除动态附加的事件处理程序.优化需要精确复制.浏览器制造商有更好的事情要做.`Element.innerHTML + = ...`是一种在JS代码中很容易避免的反模式.只是不要这样做. (3认同)
@ alpha123`有一些涉及Ajax的有效用途`你在这里是什么意思？ (2认同)
`e.innerHTML + = ...`现在被广泛使用.在90%的情况下,它可以由insertAdjacentHTML替换,但由于某些原因,大多数JSers根本就没有听说过它.现在这是一个教育问题...... (2认同)