易混性能差

Question

这是比较的innerHTML /的textContent性能，在现有的以及关于新创建的style元件的测试：http://jsperf.com/innerhtml-vs-textcontent/3

结果暗示：

• innerHTML和textContent在每个测试的浏览器上执行完全相同的新创建的style节点
• 在现有的style节点上，它们在Safari和Opera中执行完全相同，但是innerHTML是快于Firefox和Chrome
• 与新创建的一个更换style节点是不是覆盖它在Firefox和Chrome在Opera textContent，慢，在Safari没有区别更快。

虽然这并不奇怪，浏览器性能的不同，我觉得在大胆部分相当惊人。

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

Answer 1

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

InnerHTML将返回所有内容元素的内部，而textContent基本上是试图解析内容（摆脱标签），当您访问的元素。我猜想第一点的原因是，Google和Mozilla使用指针而不是堆obj作为参考对innerHTML进行了一些优化，这就是为什么它更快（指针分配vs obj操作）的原因。我假设FF/Chrome比其他浏览器的innerHTML标记具有更好的性能。

似乎textContent试图访问它的子节点，每次访问它时。

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