同时插入大量数据优化

实现原理

通过浏览器自带API( requestIdleCallback )用于在浏览器空闲时执行低优先级的任务，从而避免阻塞主线程，提升页面的性能和响应速度。

该API允许开发者在浏览器空闲时期插入一个函数，这个函数将在事件循环空闲时被调用，主要用于执行一些不需要立即完成的工作，如日志记录、数据分析、渲染优化等‌

代码实现

<template>
    <div class="content">
        <button @click="handleClick">点击插入{{ count }}条数据</button>
    </div>
</template>
<script setup>
import { onMounted } from 'vue';


const count = 30000
const arr = new Array(count).fill(0).map((_, i) => i)
let content;

onMounted(() => {
    content = document.getElementsByClassName('content')[0]
})


const handleClick = () => {
    profrance(arr, task)
}


// 要重复执行的操作
function task(item, index){
    const dom = document.createElement('li');
    dom.innerText = index;
    content.appendChild(dom);
}


/**
 * 
 * @param data 传入的数据
 * @param task 要执行的任务
 */
function profrance(data, task){
    if(data.length == 0){
        return;
    }
    let index = 0;
    function _run(){
        if(index > data.length){
            return
        }
        requestIdleCallback((idle) => {
            while(idle.timeRemaining() > 0 && index <= data.length){
                task(data[index], index)
                index++
            }
            _run()
        })
    }
    _run()
}






</script>