如何一次性追加动态创建的DOM元素数组以避免多次重排？

当然可以实现批量追加。Element.append()支持传入多个参数，但不直接接受数组作为单个参数，你可以通过以下几种方式达成需求：

方法1：使用展开运算符（推荐） #

ES6的展开运算符...能将数组元素拆解为独立参数，直接传递给append()，语法简洁且性能友好：

let parent = document.getElementById('parent');
let array = [];    

for (let i = 0 ; i < 10 ; i++) {
    array[i] = document.createElement("span");
    array[i].textContent = i;
}

// 批量追加数组内的所有元素
parent.append(...array);

方法2：使用Function.prototype.apply() #

如果需要兼容不支持ES6的旧环境，可以用apply()方法将数组转换为参数列表传入：

// 借助apply实现批量追加
Element.prototype.append.apply(parent, array);

方法3：使用DocumentFragment #

先将所有元素添加到DocumentFragment（文档片段）中，再一次性将片段追加到父元素。文档片段本身不会出现在DOM树中，插入时只会将其内部子元素挂载到目标节点，同样能避免多次DOM重排：

let fragment = document.createDocumentFragment();
array.forEach(el => fragment.appendChild(el));
parent.appendChild(fragment);

核心原理 #

多次调用append()会触发多次DOM重排，而一次性传递所有元素仅会触发一次重排，能有效提升页面性能。

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