vue白屏优化（defer）_vue defer

---

一、场景复现？

我这里导入了一个组件，组件里加载了一千张小图标，循环了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
    }


### 总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。



包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

![](https://img-blog.csdnimg.cn/img_convert/d74f8b42f4a63c76b18efc6a818147df.png)

![](https://img-blog.csdnimg.cn/img_convert/6deb905d9655a3f0f54b8920686e1970.png)

**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/4272859445950698

**真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲**
**详情关注公中号【编程进阶路】**

3a38ca2b86545fc6.png)



**JavaScript**

![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)

**性能**

![](https://img-blog.csdnimg.cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png)



**linux**

![](https://img-blog.csdnimg.cn/img_convert/ed368cc25284edda453a4c6cb49916ef.png)