Jquery - 追加vs AppendTo

Posted 2021-04-10

有人可以解释一下为什么常规追加循环比AppendTo更好吗？

//Using Regular Append
var ul = $("<ul></ul>");
$("#myDiv").empty().append(ul)

$.each(movies, function (count, item) {
    var id = 'li_' + count;
    ul.append('<li id=' + id + '>' + item + '</li>');

    $('#' + id).click(function () { });
});

//Using AppendTo
var div = $("#myDiv").empty(),
    ul = $("<ul></ul>").appendTo(div);

$.each(movies, function (count, item) {
    $('<li>' + item + '</li>').click(function () { }).appendTo(ul);
});

结果http://jsperf.com/sdp-jquery-append/3

答案

append vs appendTo performance（jQuery 1.9.1）

从jQuery代码中可以看出，appendTo具有更好性能的原因之一是因为appendTo实现比常规追加稍微复杂一些。

虽然append大致取决于native appendChild函数，但appendTo是一个需要由代码处理的jQuery补充（appendTo中有额外的循环，它对元素进行操作并实际调用.append）。虽然性能影响不大（如果你只是比较最简单的用法，比如在这个例子中：http://jsperf.com/sdp-jquery-append/5），它肯定是要记住的。

至于链接的jsperf中标记为“Better”的示例：

它表现得更好，因为在最快的版本中（在你链接到的jsperf中）你只需要收集要附加的html，而不是在每次迭代时实际附加它。

它节省了浏览器资源，因为它不必在每次迭代时重排和重新绘制内容。

另一答案

append(content)将内容添加到每个匹配元素的内部。

appendTo(selector)将所有匹配的元素附加到另一个指定的元素集。