jQuery性能：链附加或附加多个参数？

Question

我想知道哪些更具性能，更重要的是为什么？

$('a').append(
    $('<b></b>').text('1'),
    $('<b></b>').text('2'),
    $('<b></b>').text('3'));

和

$('a')
    .append($('<b></b>').text('1'))
    .append($('<b></b>').text('2'))
    .append($('<b></b>').text('3'));

其中a和<b>是任意选择器和标记。据我尝试一样，它们都以完全相同的方式运作。

相关问题：What is the best way to add options to a select from as a JS object with jQuery?

修改

我问这个问题的原因是要知道我是否应该将附加结构为：

texts = ['1','2','3','4','5'];
$a = $('a');
$a.append(...texts.map(function(o){ return $('<b></b>').text(o); }));

或作为：

texts = ['1','2','3','4','5'];
$a = $('a');
for (o in texts) {
    $a.append($('<b></b>').text(o));
}

后者更直观，我相信大多数程序员会选择编写它，而前者更好。

Answer 1

您可以使用基准测试工具对此进行测试。我使用了JSPerf：https://jsperf.com/so-question

结果显示第一种情况要快得多。我相信这是因为每次调用与元素一起使用的函数时，jQuery都会执行大量的初始化，检查和兼容性工作，即.append()。

第一种情况只调用.append()一次，而第二种情况调用.append()三次。通常，您调用的函数越少，代码就越快。