vue2 、 vue3首屏优化，减少白屏时间

在第一帧的时候加载应该被用户看到的页面部分，剩下的逐步加载

1.  使用v-for来模拟页面有很多重组件

<template v-for="item in 100"><sub-home-page :key="item" v-if="defer(item)"></sub-home-page></template>

2.在created钩子中使用requestAnimationFrame对count进行赋值

let that = thisfunction updataFrame() {that.count++;if(that.count >= this.components) return that.reqId = requestAnimationFrame(updataFrame);}updataFrame();

3.使用计算属性，来控制组件是否渲染

defer(){return function(n){return this.count >= n;}}

4.在页面销毁的时候，取消requestAnimationFrame

destroyed(){cancelAnimationFrame(that.reqId)},

Vue3版本：

首页模拟100个重组件

<template><div class="index"><div v-for="item in 100" :key="item"><sub-index v-if="defer(item)"></sub-index></div></div>
</template><script setup>
import subIndex from "./components/subIndex.vue";
import { useDefer } from "/src/utils/useDefer.js";
const defer = useDefer();
</script><style lang="less" scoped>
.index{width: 100%;height: 100%;overflow: auto;display: grid;grid-template-columns: repeat(3, fr);grid-gap: 0.1em;
}
</style>

 子组件(重组件)

<template><div class="subHomePage"><div class="item" v-for="item in 5000" :key="item"></div></div>
</template><script setup></script>
<style scoped lang="less">
.subHomePage{display: flex;flex-wrap: wrap;justify-content: center;border: 3px solid red;.item{width: 5px;height: 3px;background: #ccc;margin: 0.1em;}
}
</style>

 useDefer.js文件

import { ref, onUnmounted } from "vue";
export function useDefer(maxCount = 100){let count = ref(0);let reqId = null;function updataFrame() {count.value++;if(count.value >= maxCount) return reqId = requestAnimationFrame(updataFrame);}updataFrame();onUnmounted(() => {cancelAnimationFrame(reqId)})return function (n){return count.value >= n;}
}