项目启动出现白屏问题需要刷新后才能显示解决方案
Vue项目起始时出现白屏问题需要刷新后才能显示解决方案
- 项目加\<div>
- 为什么页面会出现加载过慢问题？
- 如何让页面变得更快
- 懒加载
- 静态资源缓存
- Webpack解决方案
- 减少Js冗余操作
项目加<div>
在vue中,我们常常会因为在template模板中没有加div标签而使得页面出现白屏情况,这时我们加一个div标签就可以解决这个问题.
解决前
<template></template>
解决后:
<template><div></div></template>
为什么页面会出现加载过慢问题？
可能原因有以下两种：
- js脚本加载时间过长
- 资源过多加载延迟，在初次渲染时无法加载成功
如何让页面变得更快
懒加载
首先我们知道资源过多可能是导致页面白屏发生的情况之一，那么我们就可以通过懒加载的方式来进行页面加载，懒加载的含义就是：让可视区域的资源先被加载出来，而没有被可视区域看到的部分先不加载出来。比如我们常用的分页查询，假设一页有十条数据，那么我们在最初进入页面时，不论它有几千几万条数据，页面加载出来的数据只有十条，同时CSDN中我们的主页，也用到的类似懒加载的机制，在我们发布很多文章时候，超过可视区域，那么在主页中下拉，我们会发现下拉的过程中会出现一秒的卡顿，那是页面在进行新文章数据的加载，为了避免资源过多而引起的浪费。这样就可以有效的解决白屏问题。
静态资源缓存
浏览器是有自己的缓存机制：强缓存和协商缓存，当我们的静态资源长期不会发生变化时，那么我们就可以通过Cache-control来实现强制缓存，强缓存那些长期没有变化的资源也是能让页面更快的开启的一种方式，同时也可以解决白屏问题。
Webpack解决方案
如果我们使用的脚手架是webpack时，我们可以通过webpack的一个属性实现离线化预渲染： prerender-spa-plugin .从而解决白屏问题.
减少Js冗余操作
Js操作过多也可能导致页面加载速度过慢从而使得页面初次加载时出现白屏问题,可以通过常用的性能优化手段来解决这个问题:比如我们在使用百度联想词时候会不断的通过调用API在输入的时候,那么我们就可以利用防抖来实现一个性能优化,防抖就是指不是实时的进行调用联想词API,而是等待特定时间节点内用户没有继续输入时候再调用API,那么就可能实现一个性能优化,从而减少页面执行时间.