前端性能优化篇：分批加载

性能优化的作用不言而喻，我们今天要搞的就是列表的性能优化，除了常用的分页之外，我们还有一个分批加载，主要就是后端返回大批量的数据，我们在渲染的时候通过循环的定时器去加载，话不多说，直接上代码：

<ul id="ul"></ul>

 const arrayList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    let ul = document.getElementById('ul')

    // 将数据分批
    let result = []
    for (let i = 0; i < arrayList.length; i += 4) {
        result.push(arrayList.slice(i, i + 4));
    }

    // 循环将数据加载
    for (let i = 0; i < result.length; i++) {
        setTimeout(() => {
            renderLi(result[i])
        }, i * 1000);
    }

    // 生成节点
    function renderLi(array) {
        for (let i = 0; i < array.length; i++) {
            let li = document.createElement('li')
            li.innerText = array[i]
            ul.appendChild(li)
        }
    }

这是一个比较简单的例子，具体的话还是需要实际应用才知道，但是大致的解决思想是不改变的。
欢迎指导。