vue白屏优化（defer）_vue defer，2024年最新最新HarmonyOS鸿蒙开发面试解答

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

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

因此收集整理了一份《2024年HarmonyOS鸿蒙开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

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

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

如果你觉得这些内容对你有帮助，可以添加VX：vip204888 （备注鸿蒙获取）

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

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


![在这里插入图片描述](https://img-blog.csdnimg.cn/f529509fad1847e7845a0e6943ea771d.png)


## 二、主要思路


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


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


## 三、具体代码


代码如下（示例）：

> 
>     页面渲染时间线被分成了很多小时间段，每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，骑士都是同样的道理。  
 ![请添加图片描述](https://img-blog.csdnimg.cn/c4bd8d4a2238490bb34d3d54d0979f46.jpeg)


## 总结


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





.csdnimg.cn/c4bd8d4a2238490bb34d3d54d0979f46.jpeg)


## 总结


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