前端处理10w条数据，优化方式

1.使用定时器，一次性渲染

//arr: 一次性传入10w条数据
//1.数据进行分摊
averageFn(arr){
    let i = 0;
    let res = []
    while(i<arr.length){
        res.push(arr.slice(i,i+10))
        i = i+10
    }
    return res
}
let twoArr = averageFn(arr)

//for(let i = 0;i<twoArr.length;i++){
//   setTimeout(()=>{
//        this.arr = [...this.arr,...twoArr[i]]
//    },20*i}
//}


// requestAnimationFrame(()=>{})

//2.定义一个渲染函数
const useTwoArr = (page) =>{
    if(page>twoArr.length -1){
        return
    }
   //3.用动画请求帧来优化
    requestAnimationFrame(()=>{
        //4.取出一项，拼接一项
        this.arr = [...this.arr,...twoArr[page]]
        //5 这一项 进行下一项
        page = page + 1
        //6.递归调用这个函数
        useTwoArr(page)
    })
}

2.触底加载

3.使用vxetable插件实现虚拟列表

        如果不是列表，是table表格的话，推荐一个好用的ui组件，vxetable，表格相关业务，其中包括虚拟列表。vue2和vue3版本都支持，性能比较好，**虚拟滚动（最大可以支撑5w列、30w行）**