34

我试图找出在浏览器中深度克隆 DOM 树的最高效方法。

如果我开始

var div = document.getElementById("source");
var markup = div.innerHTML;

什么会更快，

var target = div.cloneNode(true);

或者

var target = document.cloneNode(false);
target.innerHTML = markup;

我知道浏览器平台在这里可能会产生很大的不同，因此任何有关这些在现实世界中如何比较的信息都将不胜感激。

4

2 回答 2

56

让我们测试一下！

我将以下代码添加到 StackOverflow 问题页面的副本中（首先删除现有脚本，然后从头开始运行，timeit()每次都未注释其中一个 s，三个运行 100 个操作：

function timeit(f) {
    var start= new Date();
    for (var i=100; i-->0;) {
        f();
    }
    return new Date()-start;
}

var c= document.getElementById('content');
var clones= [];

//alert('cloneNode: '+timeit(function() {
//    clones.push(c.cloneNode(true));
//}))

//alert('innerHTML: '+timeit(function() {
//    var d= document.createElement('div');
//    d.innerHTML= c.innerHTML;
//    clones.push(d);
//}))

以下是在 Core 2 Q9300 上的 VirtualBox 上运行的结果：

IE7
cloneNode: 3238, 3235, 3187
innerHTML: 8442, 8468, 8552

Firefox3
cloneNode: 1294, 1315, 1289
innerHTML: 3593, 3636, 3580

Safari3
cloneNode: 207, 273, 237
innerHTML: 805, 818, 786

Chrome1
cloneNode: 329, 377, 426
innerHTML: 2327, 2536, 2865

Opera10
cloneNode: 801, 791, 771
innerHTML: 1852, 1732, 1672

所以cloneNode(true)比复制要快得多innerHTML。当然，它总是如此；将 DOM 序列化为文本，然后从 HTML 重新解析它是一项艰巨的工作。DOM 子操作通常很慢的原因是您要一个接一个地插入/移动它们；像这样的一次性 DOM 操作cloneNode不必这样做。

Safari 设法以innerHTML惊人的速度完成操作，但仍然没有它那么快cloneNode。正如预期的那样，IE 是一只狗。

因此，对于所有说 innerHTML 显然会更快而不考虑问题实际在做什么的人来说，自动 -1 都是如此。

是的，jQuery 使用 innerHTML 进行克隆。不是因为它更快——阅读源代码：

// IE copies events bound via attachEvent when
// using cloneNode. Calling detachEvent on the
// clone will also remove the events from the orignal
// In order to get around this, we use innerHTML.

jQuery 用于Element.attachEvent()实现自己的事件系统，因此自然需要避免该错误。如果不需要，可以避免开销。

题外话：再说一次，我认为将 jQuery 列为最佳实践的顶峰可能有点错误，尤其是考虑到下一行：

html.replace(/ jQuery\d+="(?:\d+|null)"/g, "")

没错——jQuery 将它自己的任意属性添加到 HTML 元素，然后在克隆它们时需要删除它们（或者以其他方式访问它们的标记，例如通过$().html()方法）。这已经够难看的了，但它认为最好的方法是使用正则表达式处理 HTML，这是一种基本错误，你会认为天真的 1-reputation SO 提问者比 Second Coming Best 的作者更多JS 框架 Evar。

jQuery1="2"希望您的文本内容中没有任何字符串，因为如果是这样，您只是神秘地丢失了它。谢谢，jQuery！这样就结束了题外话。

于 2009-03-24T17:59:59.990 回答
1

嗯...有趣的是，我刚刚在 Firefox 3 中进行了测试，深度克隆似乎比使用 innerHTML 路线快 3 倍。

我确信 innerHTML 仍然比单个 DOM 操作更快，但至少对于深度克隆，cloneNode(true) 似乎得到了更好的优化。

于 2009-03-24T13:46:53.997 回答