jQuery性能对比：链式调用append还是多参数append？

嘿，这个问题问得很细致！咱们直接说结论：写法1（单次调用append并传入多个元素参数）的性能要明显优于写法2（链式多次调用append），核心原因主要有这两点：

1. DOM重排/重绘的触发次数差异 #

浏览器每次修改DOM后，都可能触发“重排”（重新计算元素的位置、大小）和“重绘”（把元素渲染到页面）——这俩都是浏览器的高开销操作。

• 写法2里，你调用了3次append，每一次调用都会把一个<b>元素插入到DOM树中，浏览器很可能会为每一次插入单独触发一次重排/重绘。
• 写法1则是一次性把3个<b>元素都准备好，一次性插入到DOM中，只会触发最少一次重排/重绘（现代浏览器可能会做一些优化，但肯定比3次少得多）。

2. jQuery方法调用的额外开销 #

每次调用jQuery的append方法，内部都会做一系列处理：比如解析参数、绑定上下文、维护jQuery对象的链式调用（返回当前jQuery实例）。

• 写法2是3次调用append，等于要重复执行3次这些内部逻辑，额外开销累加。
• 写法1只调用一次append，这些内部逻辑只跑一遍，开销自然更低。

补充：更极致的优化思路 #

如果要进一步提升性能，可以先把所有元素一次性构建好，再做一次append：

// 一次性创建所有需要的元素，再插入
const batchElements = $('<b>1</b><b>2</b><b>3</b>');
$('a').append(batchElements);

这种方式连多次创建单个<b>的jQuery对象开销都省了，性能会更优。

验证方式 #

你可以用浏览器控制台的计时工具直观看到差距：

console.time('单次append');
$('a').append($('<b></b>').text('1'), $('<b></b>').text('2'), $('<b></b>').text('3'));
console.timeEnd('单次append');

console.time('链式append');
$('a').append($('<b></b>').text('1')).append($('<b></b>').text('2')).append($('<b></b>').text('3'));
console.timeEnd('链式append');

在元素数量越多的场景下，两者的性能差距会越明显。

内容的提问来源于stack exchange，提问作者mmdts