使用defer优化白屏时间 长列表渲染

创建 useDefer.js文件

import { ref , onUnmounted } from 'vue'

export function useDefer(maxCount=100){
  const frameCount = ref(0)
  let rafId;
  function updateFrameCount(){
   rafId = requestAnimationFrame(()=>{
     frameCount.value++;
     if(frameCount.value>=maxCount){
        return;
     }
     updateFrameCount()
  })  
 } 
 updateFrameCount()
 onUnmounted(()=>{
   cancelAnimationFrame(rafId);
 })
 return function defer(n){
   return frameCount.value>=n
 }   
}

在组件中使用

 1 <template>
 2     <div>
 3         <div v-for="(item, index) in 1000" :key="index">
 4             <customComponent v-if="defer(index)"></customComponent>
 5         </div>
 6     </div>
 7 </template>
 8 
 9 <script setup>
10 import { useDefer } from './useDefer'
11 
12 const defer = useDefer()
13 </script>