Vue框架下的渲染白屏优化

What——什么是白屏优化

当页面有许多个需要渲染的DOM元素时，页面在渲染进行中的白屏状态。

Why——为什么要做白屏优化

在用户体验上，长时间的白屏状态会带来严重的负面印象。

How——如何做白屏优化

自定义defer函数

import { ref } from 'vue'

export function useDefer(maxFrameCount = 1000) {
  const frameCount = ref(0)  // 当前帧数
  const refreshFrameCount = () => {  // 更新帧数
    frameCount.value++
    if(frame.value < maxFrameCount)
      refreshFrameCount()
  }
  refreshFrameCount()
  return function(showCount) {
    return frameCount.value >= showCount
  }
}

在Vue组件中如下使用：

<script setup>
import { useDefer } from './useDefer'
const defer = useDefer()
</script>
<template>
  <div>
    <div v-for="i in 100">
      <component v-if="defer(i)" />
    </div>
  </div>
</template>

利用v-if来控制每一帧渲染多少个组件