解决首屏渲染白屏时间过长

1.问题

例如当代码中重组件过多等，造成首屏加载时间过长导致的白屏

2.方案

考虑到用户体验，先加载用户第一眼主要看到的页面，其余的一些放在之后加载，即延迟渲染。

3.思路

定义defer函数，与组件绑定，组件v-if绑定函数返回值true或false决定组件渲染时机。

4.代码

vue3项目写法：

<div>
    <div v-for="n in 100">
        <heavy-com v-if="defer(n)"></heavy-com>
    </div>
</div>

export function useDefer() {
    // 获取目前渲染多少帧，定义响应式数据
    const count = ref(0)

    let raId;

    // 刷新帧函数，max根据项目情况设定默认值进行优化
    function updateCount(max = 100) {
        requestCount(() => {
            count.value++
                if (count.value >= max) {
                    return;
                }
            updateCount()
        })
    }
    updateCount()

    // 组件销毁时停止计算
    onUnMounted(() => {
        cancelAnimationFrame(raId)
    })

    return function defer(n) {
        // return 目前渲染了多少帧>=n
        //到达指定临界点后返回true，组件开始依次渲染
        return count.value >= n
    }
}