innerHTML / textContent 设置器中令人困惑的性能差异

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 正在尝试访问其子节点并在调用时对其进行解析，如果它检测到没有附加子节点会更快。