0

有人可以解释一下为什么常规的 Append into a loop 比 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

4

2 回答 2

0

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

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

于 2014-08-20T19:01:24.420 回答
0

append vs appendTo 性能（jQuery 1.9.1）

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

虽然 append 大致取决于本机 appendChild 函数，但 appendTo 是一个需要由代码处理的 jQuery 添加（appendTo 内部有一个额外的循环，它对元素进行操作并实际上再次调用 .append ）。虽然性能影响不大（如果您只是比较最简单的用法，例如在此示例中：http: //jsperf.com/sdp-jquery-append/5），这当然是需要牢记的。

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

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

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

于 2013-05-02T08:54:01.937 回答