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