令人困惑的innerHTML / textContent setters中的性能差异

Question

这是一项比较innerHTML / textContent性能的测试，包括现有元素和新创建的style元素：http://jsperf.com/innerhtml-vs-textcontent/3

结果意味着：

• innerHTML和textContent在每个测试的浏览器中对新创建的style节点执行完全相同的操作
• 在现有的style节点上，它们在Safari和Opera中执行完全相同，但 innerHTML在Firefox和Chrome中的速度更快
• 使用新创建的节点替换style节点比在Firefox和Chrome中覆盖textContent 更快，在Opera中更慢，在Safari中没有差异。

虽然浏览器的性能不同并不奇怪，但我发现粗体的部分相当令人惊讶。

那么，innerHTML怎么可能比textContent更快，为什么替换某个节点要比替换它的内容更快？

Answer 1

检查一下： innerHTML, innerText, textContent, html() and text()?

InnerHTML将返回元素内的所有内容，而textContent基本上是在访问元素时尝试解析内容（去掉标记）。我猜第一点的原因是，Google和Mozilla对innerHTML进行了一些优化，使用指针代替堆obj作为引用，这就是为什么它更快（指针赋值与obj操作）。我认为FF / Chrome的性能优于innerHTML标记的其他浏览器。

似乎textContent每次访问时都试图访问其子节点。

对于第二部分，从您提供的代码中，js在调用textContent之前删除了子节点。正如我所说textContent试图访问其子节点并在调用时解析它们，如果它检测到没有附加子节点，它会更快。