jQuery附加html與追加現有元素

Question

我有一個字符串big_html，我想將它添加到某個div。我觀察到以下性能差異：

$('#some-div').append(big_html); 
// takes about 100 ms 

//create it first 
var append_objs = $(big_html); 
$('#some-div').append(append_objs); 
//takes about 150 ms 

有沒有人知道爲什麼會發生這種情況？感謝您的時間。

編輯： 我試圖讓我加入到頁面的東西。我也試過

var added = $(big_html).appendTo('#some-div'); 
//150 ms 

有沒有一種有效的方法來做到這一點？

Answer 1

在第二種情況下，jQuery有瀏覽器建立一個文檔片段並將它填充，所述HTML爲瀏覽器解析。然後，當你將它附加到你的頁面時，你可以再次操縱DOM。

因此，第二個版本只是做了比第一個更多的工作。

我鼓勵你（和大家有興趣）保持的jQuery的非縮小的版本，周圍審閱。閱讀代碼很有啓發。

要在之後「獲得」您的內容，它將被添加到DOM排序取決於它是什麼。由於內容正在附加，您排序，有通過記住目標的最後一個元素開始：

var last = $('#some_div > *:last'); 
$('#some_div').append(big_html_string); 
var newStuff = last.nextAll(); 

如果目標DIV可能開始空的，你需要檢查太：

var newStuff = last.length ? last.nextAll() : $('#some_div > *');