向页面中添加30000个li标签

li 数量少

当我们向页面中添加少量的 li 标签的时候，可以使用普通的添加元素的方法：

<!-- html -->
<ul id="container"></ul>

// js
let container = document.getElementById('container');
for (let i = 0; i < 4; i++) {
    let item = document.createElement('li');
    item.innerText = i + 1;
    ul.appendChild(item);
}
// 或者
// let html = [];
// for (let i = 0; i < 3; i++){
//     html.push('<li>' + (i + 1) + '</li>');
// }
// container.innerHTML = html.join('')

li 数量非常多

但是当我们要添加的 li 标签的数量很多的时候，如果我们还是采取这种方法的话，页面加载的速度会很慢。

举个例子：向页面中添加 30000 个 li 标签。

还是采取上面的方法：

for (let i = 0; i < 30000; i++) {
    let item = document.createElement('li');
    item.innerText = i + 1;
    container.appendChild(item);
}

效果：

01.gif

可见，每当刷新的时候，页面加载的速度非常慢，这种方法对于页面性能有很大的副作用影响。

分治处理 / 批处理

分治处理是采取分治算法思想，将很多的事件处理分为若干次处理的思想。

主要方法是 创建文档碎片 ：document.createDocumentFrag

上面例子的改良：

let container = document.getElementById('container');

let totalCount = 30000;     // 总共的 li 数量
let oneCount = 4;       // 每次添加的 li 数量
let base = 0;       // 用于计数，目前执行添加了几次批处理
let preCount = totalCount / oneCount;       // 总共需要执行的批处理次数

while (base * oneCount < preCount) {
    let fragment = document.createDocumentFragment();
    for (let i = 0; i < 4; i++) {
        let item = document.createElement('li');
        item.innerText = (base * oneCount) + i + 1;
        fragment.appendChild(item);
    }
    container.appendChild(fragment);
    base = base + 1;
}

效果：

02.gif

很明显，这次每当刷新页面的时候，页面加载的速度快了很多。