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