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