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 > *');