.append VS .html VS .innerHTML 性能

这个网站对 3 种不同的方法进行了测试，看起来.html是最快的，其次是.append。其次是.innerHTML。有人可以向我解释原因吗？

这是进行比较的网站 http://jsben.ch/#/yDvKH三种方法之中。

我读过这个这个问题 https://stackoverflow.com/questions/3015335/jquery-html-vs-append这是相关的，但我不太明白给出的答案，而且这个问题并没有真正详细说明.innerHtml.

我不明白以下部分：

创建了一个临时元素，我们将其称为 x。 x 的innerHTML 设置为您传递的HTML 字符串。然后 jQuery 会将每个生成的节点（即 x 的子节点）传输到新创建的文档片段，然后将其缓存以供下次使用。然后它将返回片段的 childNodes 作为新的 DOM 集合。 请注意，它实际上比这复杂得多，因为 jQuery 进行了一系列跨浏览器检查和各种其他优化。例如。如果你刚刚通过<div></div>对于 jQuery()，jQuery 将采取捷径，只需执行 document.createElement('div') 即可。

有人可以简化这个吗？

这三个对我来说都很慢。每次迭代修改 dom 的速度都很慢。

http://jsperf.com/jquery-append-vs-html-list-performance/24 http://jsperf.com/jquery-append-vs-html-list-performance/24

我刚刚在其中添加了一个新测试：

var html = [];
for (var i = 0; i < len; i++) {
  html.push('<div>Test ' + i + '</div>');
}

document.getElementById('list').innerHTML = html.join('');

这又快得多了。 :)

我在 Firefox 中的方法每秒执行 26k Ops，而每秒执行 1,000、10,000 和 13