Jquery - 追加与追加

Posted 2023-03-11

【中文标题】Jquery - 追加与追加

【英文标题】：Jquery - Append vs AppendTo

【发布时间】：2013-04-26 09:08:13

【问题描述】：

谁能解释一下为什么常规的 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

【问题讨论】：

添加了一些更快的选项：jsperf.com/sdp-jquery-append/4

只是一个旁注：当您使用append 时，您正在附加一个字符串。当您使用 appendTo 时，您正在附加一个 jQuery 对象。 append 仍然稍微快一些，但是在将 append 与 jQuery 对象 (jsperf.com/sdp-jquery-append/6) 一起使用时，性能差异要小得多。我猜想在使用 appendTo 时会产生一些额外的开销，因为您首先创建对象，然后调用该对象的方法，而不是选择缓存的对象并附加到它。

【参考方案1】：

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，而不是在每次迭代时实际附加它。

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

【讨论】：

我不太明白你的意思，因为这两个附加都在一个“每个”循环中，而且在第一个版本中，浏览器需要再次选择节点，而不是使用“缓存”元素通过appendTo返回

你添加的样本更好，但我的问题是关于 $.append 和 $.appendTo 之间的区别

顺便说一句，有一个更快的解决方案，不使用 jQuery 每个循环，但原生用于：jsperf.com/sdp-jquery-append/7

@Simon 是的，没错。与普通的 javascript 循环相比，jQuery.each 很慢。

【参考方案2】：

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

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