VUE使用defer优化白屏

前言

说到VUE项目优化，老生常谈的一个话题，就是首页白屏问题，当然造成白屏的原因有很多，我们要根据不同的情况灵活的进行处理，在这呢我单单指出其中一种使用场景，以及其中一种优化手段，这种优化手段比较冷门，相信很多同学都不一定知道，但是超级好用！！！

一、场景复现？

    我这里导入了一个组件，组件里加载了一千张小图标，循环了20次,每循环一次，重新渲染一次组件，页面加载的时候很明显会出现一个白屏时间。这种页面有很多元素，特别是大屏展示一类元素密集的页面总加载时间就会更长。

<template>
  <div class="hell"  v-for="index of 20">
    <HelloWorld
      :key="index"
      class="hell"
    />
  </div>
</template>

运行以上代码会发现页面有长时间的白屏，然后在一次性的把页面显示出来,使用谷歌浏览器的调试工具集进行录制进行性能分析得到以下分析结果，从图里可以看到总耗时四秒多，其中三秒时间都在进行js的执行，这样的页面对于用户而言，是完全无法接受的，那么如何进行优化呢。

二、主要思路

让组件一部分一部分按批次渲染

    既然一起渲染浏览器压力太大了，那就想办法分摊压力，先渲染其中一部分，保证让用户能够看得到，然后再持续渲染剩下的部分，虽然总的时间不会有太大变化，甚至还有可能会增加，但是对于用户的感知而言，从用户打开页面到第一次看见页面视图这一段时间是大幅度的缩减了。

三、具体代码

代码如下（示例）：

<template>
  <div class="hell"  v-for="index of 20">
    <HelloWorld v-if='defer(n)'
      :key="index"
      class="hell"
    />
  </div>
</template>

    页面渲染时间线被分成了很多小时间段，每16毫秒渲染一次，defer(n)表达的是目前渲染的帧数有没有超过n，比方说n传的20，表达的意思就是当渲染帧到达第一帧的时候defer(n)返回false，第二帧第三帧都是，直到到达第20帧的时候返回true，由于使用的v-if这个时候这个组件就会渲染显示出来。

函数封装

export function defer(maxFrameCount = 1000) {
    const frameCount = ref(0);
    const refreshFrameCount = () => {
        requestAnimationFrame(() => {
            frameCount.value++;//计数帧数加一
            if (frameCount.value < maxFrameCount) {
                refreshFrameCount();//只要没到最大帧数就一直持续调用函数
            }
        });
    };
    refreshFrameCount();
    return function (showInframeCoount) {
        return frameCount.value >= showInframeCoount;//判断当前渲染帧数又是否大于自定义n
    }
}

虽然总体时间变化不大，但是从页面加载到用户第一次看到页面的时间大大缩短，再次分析可以看见渲染过程变成了一块一块一帧一帧渲染，避免了页面长时间白屏卡顿，每一次渲染，用户都能看到渲染结果，有点类似react的fiber，骑士都是同样的道理。

总结

这种经典的优化方案，只是vue优化里的冰山一角，希望大家一起学习，共同进步