介绍

在页面中假如一次性给你100w条或者更多数据时，直接对页面进行渲染就会造成卡顿的效果，这时候我们就可以使用到分片渲染。

分片渲染

分片添加数组就是数据分开每次添加多少条，这样解决了一次性渲染所带来的卡顿。

实现逻辑

利用递归+闭包+setTimeout+分页。
每递归一次截取10条对数组进行添加，总长度<当前数组长度时，停止递归。

   // 性能优化，切片渲染
   SliceRendering (total, attrs, arr) {
    /*
   		total 总条数
   		attr  需要分片的数据
   		arr   需要进行添加数组
   */
    var current = 1 //当前页
    var pSize = 10 //每页显示多少条
    function loadSlice () {
        var startRow = (current - 1) * pSize;//开始显示的行  
        var endRow = current * pSize;//结束显示的行   
        if (arr.length < total) {
            //定时器属于宏任务，它的执行顺序是等上一个宏任务也就是上一个定时器执行完成之后才能执行
            setTimeout(() => {
                //使用递归的方式
                arr.push(...attrs.slice(startRow, endRow))
                current++
                loadSlice();
            }, 100);
        } 
    }
    return loadSlice()
}