使用vue写一个抽奖效果,页面数据不断滚动,如何提升其性能?

shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
},
setList(list){
    const chunks = [];
    if(this.groups){
        for (let i = 0; i < list.length; i += this.chunkSize) {
            chunks.push(list.slice(i, i + this.chunkSize));
        }
        this.grouplist = chunks;
    }else{
        this.grouplist = null;
    }
},
startLottery() {
    if (!this.isRunning) {
        this.isRunning = true;
        let list = this.groups[this.group_index]['company'];
        const updateList = () => {
            this.tempList = this.shuffleArray(list);
            this.setList(this.tempList);
            if (this.isRunning) {
                this.intervalId = requestAnimationFrame(updateList);
            }
        };
        updateList();
    }
},
pauseLottery() {
    if (this.isRunning) {
        this.isRunning = false;
        window.cancelAnimationFrame(this.intervalId);
        this.groups[this.group_index]['company'] = this.tempList;
    }
}

使用 requestAnimationFrame： 替代使用 setInterval，使用 requestAnimationFrame 来执行 DOM 更新，因为它可以在浏览器进行下一次重绘之前执行。这可以减少频繁的 DOM 操作，提升性能。