知识铺垫

createDocumentFragment

createDocumentFragment是 DOM 节点，不是主 DOM 树的一部分，是文档碎片；

用来创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。

因为文档片段存在于内存中，不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。

JS基准测试

console.time 和 console.timeEnd 方法允在任意代码中使用, 显示的结果是中间持续的时间, 以毫秒为单位.

第1种

for (var i = 0; i < 1000; i++) {
    // 慢在每次都要去页面获取内容，然后拼接
    document.body.innerHTML += '<div>' + i + '</div>';
}
console.timeEnd('耗时：'); // 837.60693359375 

第2种

let str = '';
for (var i = 0; i < 1000; i++) {
    str += '<div>' + i + '</div>';
}
// 最后一次性把拼接好的内容放到页面当中
document.body.innerHTML = str;
console.timeEnd('耗时：'); // 1.587890625

第3种

let arr = [];
for (var i = 0; i < 1000; i++) {
    arr.push('<div>' + i + '</div>');
}
// 最后一次性把拼接好的内容放到页面当中
document.body.innerHTML = arr.join('');
console.timeEnd('耗时：'); // 2.361083984375

第4种

for (var i = 0; i < 1000; i++) {
    var oDiv = document.createElement('div');
    oDiv.innerHTML = i;
    document.body.appendChild(oDiv);
}
console.timeEnd('耗时：'); //  5.4111328125

第5种

// “箱子”、“盒子”，文档碎片
let oFrag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
    var oDiv = document.createElement('div');
    oDiv.innerHTML = i;
    // 每次往箱子里面去装
    oFrag.appendChild(oDiv);
}
// 最后一次添加的是“箱子”（箱子里面就有一千个div）
document.body.appendChild(oFrag);
console.timeEnd('耗时：'); //  5.4111328125