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

回答

相關問題