Question

使用jQuery向dom追加新元素时，有没有比其他方法更好的性能？

这是我通常这样做的方式：

$('<div class="foo">Hello World!</div>').appendTo($("#bar"));

但我已经看过很多次了：

$('<div/>').attr("class", "foo").text("Hello World!").appendTo($("#bar"));

我认为第一个更容易阅读。第二个利用链接，但最终，结果是相同的。但是以另一种方式做到这一点会更快吗？

Answer 1

正如您在此处所见：http://www.jsfiddle.net/SvCTK/

性能上的差异非常微不足道（也许不是那么微不足道，为自己找到）。基准来源：

var loop = 1000,
    $bar = $('#bar');

console.time('first')
while(loop--){
    $('<div class="foo">Hello World!</div>').appendTo($bar);
}
console.timeEnd('first');

loop = 1000;
$bar.html('');

console.time('second')
while(loop--){
   $('<div/>').attr("class", "foo").text("Hello World!").appendTo($bar);
}
console.timeEnd('second');

您需要打开FireBug或Webkit developers tools才能看到结果。

Answer 2

第一个更快，因为它不需要处理attr函数的额外调用。

Answer 3

两种方式都很好，但是由于使用较少的方法，第一种方法会更快一些。所以不要只使用.appendTo，而是使用.attr，.text和.appendTo。

Answer 4

你的比较并不安静准确。如果您的代码将属性值添加到目标元素，那么您将拥有相同数量的函数调用。我很确定它们是等效的方法。

编辑：

JQuery是使用流畅的接口概念编写的，它支持方法调用的链接。它是与逐步编写每一步的等效代码。

Answer 5

document.createElement()在技术上是创建DOM元素的最快方法。但是，节省的时间通常是微不足道的。

$(document.createElement('div'))
    .attr('class', 'foo')
    .text("Hello World!")
    .appendTo("#bar");

在jQuery中创建新元素时，是否有更快的方法？

5 个答案: