vue白屏优化（defer）_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
    }
}


**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数HarmonyOS鸿蒙开发工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**

**因此收集整理了一份《2024年HarmonyOS鸿蒙开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**
![img](https://img-blog.csdnimg.cn/img_convert/40a18b928b95e7d8bfc1036a5e56c0a2.png)
![img](https://img-blog.csdnimg.cn/img_convert/a72c1c12fb731ae8f7984f57df703bf0.png)
![img](https://img-blog.csdnimg.cn/img_convert/c5ad6e04f9fb6b49a3b2a8ad42bd74ea.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上HarmonyOS鸿蒙开发知识点，真正体系化！**

**由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新**

**如果你觉得这些内容对你有帮助，可以添加VX：vip204888 （备注鸿蒙获取）**
![img](https://img-blog.csdnimg.cn/img_convert/abad2fa4c113dfe33ab2470ed6ffd688.png)

**一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

d9R-1712865043161)]

**一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**