使用defer优化页面白屏时间

userDefer.js

import {ref} from 'vue';
const count = ref(0)

function update(){
    count.value++;
    requestAnimationFrame(update)
}
update()
export function useDefer(){
    return function (n){
      return count.value >= n
    }
}

 

test.vue

<template>
  <div>
    <com v-if="defer(1)"></com>
    <com v-if="defer(1)"></com>
    <com v-if="defer(2)"></com>
    <com v-if="defer(3)"></com>
  </div>
</template>

<script setup>
// defer优化页面加载的白屏时间，用于页面组件很多，很消耗性能的情况
// defer函数用于延迟执行，优化页面渲染性能
import { useDefer } from "./useDefer.js";
const defer = useDefer();
</script>