2024年最新vue白屏优化（defer）_vue defer，2024最新大厂高频微服务面试总结

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

• 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这个时候这个组件就会渲染显示出来。

后话

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。

是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。