使用帧加载vue组件

背景

首页渲染页面的时候，因为加载的元素特别多，页面会出现白屏

解决方案

使用浏览器的API requestAnimationFrame， 比如每一帧加载一个组件，依次加载所有的组件

举例说明

目录结构

components --HeavyComp.vue APP.vue useDefer.js

useDefer.js

import { ref } from 'vue'; export function useDefer(speed = 1) { const count = ref(0); let frame = 0; function update() { frame++; if (frame % Math.round(60 / speed) === 0) { count.value++; } requestAnimationFrame(update); } update(); return function (n) { return count.value >= n; }; }

APP.vue

<script setup> // import HelloWorld from './components/HelloWorld.vue' import HeavyComp from './components/HeavyComp.vue'; import { useDefer } from './useDefer.js'; const defer = useDefer(); </script> <template> <div> <a href="https://vite.dev" target="_blank"> <img src="/vite.svg" class="logo" alt="Vite logo" /> </a> <a href="https://vuejs.org/" target="_blank"> <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /> </a> </div> <!-- <div class="container"> <div v-for="n in 100" :key="n"> <heavy-comp></heavy-comp> </div> </div> --> <div class="container"> <div v-for="n in 100" :key="n"> <heavy-comp v-if="defer(n)"></heavy-comp> </div> </div> </template> <style scoped> .logo { height: 6em; padding: 1.5em; will-change: filter; transition: filter 300ms; } .logo:hover { filter: drop-shadow(0 0 2em #646cffaa); } .logo.vue:hover { filter: drop-shadow(0 0 2em #42b883aa); } .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1em; } </style>

HeavyComp.vue

<script setup> import { ref } from 'vue' defineProps({ msg: String, }) const count = ref(50) </script> <template> <div v-for="i in count" :key="i"> <p> Check out <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank" >create-vue</a >, the official Vue + Vite starter </p> <p> Learn more about IDE Support for Vue in the <a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank" >Vue Docs Scaling up Guide</a >. </p> <a href="https://vite.dev" target="_blank"> <img src="/vite.svg" class="logo" alt="Vite logo" /> </a> <a href="https://vuejs.org/" target="_blank"> <img src="../assets/vue.svg" class="logo vue" alt="Vue logo" /> </a> </div> </template> <style scoped> .read-the-docs { color: #888; } </style>

效果展示

组件会一步步加载，公司禁止图片，老弟这里没法贴图。自己运行代码查看吧。