Jquery - AppendTo AppendTo

有人可以解释为什么常规追加到循环比AppendTo更好吗？Jquery - AppendTo AppendTo

//Using Regular Append 
var ul = $("<ul></ul>"); 
$("#myDiv").empty().append(ul) 

$.each(movies, function (count, item) { 
    var id = 'li_' + count; 
    ul.append('<li id=' + id + '>' + item + '</li>'); 

    $('#' + id).click(function() { }); 
}); 

//Using AppendTo 
var div = $("#myDiv").empty(), 
    ul = $("<ul></ul>").appendTo(div); 

$.each(movies, function (count, item) { 
    $('<li>' + item + '</li>').click(function() { }).appendTo(ul); 
});

结果 http://jsperf.com/sdp-jquery-append/3

来源

2013-05-02 Sebastian Pederiva

添加了一些更快的选项：http://jsperf.com/sdp-jquery-append/4 – techfoobar 2013-05-02 09:04:11

只是一个旁注：当你使用'append'时，你追加一个字符串。当你使用'appendTo'时，你正在附加一个jQuery对象。 'append'仍然稍微快一点，但是当使用'append'和一个jQuery对象时，性能差异要小得多（http://jsperf.com/sdp-jquery-append/6）。我猜想在使用'appendTo'作为首先创建对象时，会有一些额外的开销，然后调用该对象上的方法，而不是选择一个缓存对象，并追加到它。 – billyonecan 2013-05-02 09:40:40

追加VS appendTo性能（jQuery的1.9.1）

从什么可以在jQuery代码，原因appendTo具有更好的性能一个可以看出，是因为appendTo的实现比普通的append稍微复杂一些。

appendTo大致依赖于本地appendChild函数，appendTo是一个需要由代码处理的jQuery添加（appendTo中有附加循环，它对元素进行操作并实际再次调用.append）。虽然性能下降并不大（如果您只比较最简单的用法，如本例中：http://jsperf.com/sdp-jquery-append/5），但这当然值得注意。

作为例子标示在连接jsperf“更好”：

它执行得更好，因为在最快的版本（在jsperf您链接到）你仅仅收取HTML要追加，而不是实际追加它每一次迭代。

它节省了浏览器资源，因为它不必在每次迭代时重新排列和重新绘制内容。

来源

2013-05-02 08:54:01 WTK

我真的不明白你的意思，因为两个追加都进入了'each'循环，并且在第一个版本中浏览器需要再次选择节点，而不是使用“cached”元素通过appendTo返回 – 2013-05-02 09:00:15

样本添加更好，但我的问题是关于$ .append和$之间的区别.appendTo – 2013-05-02 09:13:27

顺便说一句，有一个更快的解决方案，而不使用jQuery每个循环，但原生的：http://jsperf.com/sdp-jquery-append/ 7 – Simon 2013-05-02 09:38:02

append(content)将内容追加到每个匹配元素的内部。

appendTo(selector)将所有匹配的元素附加到另一组指定的元素。

来源

2014-08-20 19:01:24 wintermintz

Jquery - AppendTo AppendTo

回答

相关问题