javascript - jQuery 性能 : Chain appends or append multiple arguments?

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?

编辑:

我问这个问题的原因是想知道我是否应该将 append 结构构造为:

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

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

第一种情况仅调用 .append() 一次，而第二种情况调用 .append() 三次。一般来说，函数调用越少，代码速度就越快。