项目启动出现白屏问题需要刷新后才能显示解决方案

Vue项目起始时出现白屏问题需要刷新后才能显示解决方案

  • 项目加\<div>
  • 为什么页面会出现加载过慢问题?
  • 如何让页面变得更快
    • 懒加载
    • 静态资源缓存
  • Webpack解决方案
  • 减少Js冗余操作

项目加<div>

在vue中,我们常常会因为在template模板中没有加div标签而使得页面出现白屏情况,这时我们加一个div标签就可以解决这个问题.
解决前

<template></template>

解决后:

<template><div></div></template>

为什么页面会出现加载过慢问题?

可能原因有以下两种:

  1. js脚本加载时间过长
  2. 资源过多加载延迟,在初次渲染时无法加载成功

如何让页面变得更快

懒加载

首先我们知道资源过多可能是导致页面白屏发生的情况之一,那么我们就可以通过懒加载的方式来进行页面加载,懒加载的含义就是:让可视区域的资源先被加载出来,而没有被可视区域看到的部分先不加载出来。比如我们常用的分页查询,假设一页有十条数据,那么我们在最初进入页面时,不论它有几千几万条数据,页面加载出来的数据只有十条,同时CSDN中我们的主页,也用到的类似懒加载的机制,在我们发布很多文章时候,超过可视区域,那么在主页中下拉,我们会发现下拉的过程中会出现一秒的卡顿,那是页面在进行新文章数据的加载,为了避免资源过多而引起的浪费。这样就可以有效的解决白屏问题。

静态资源缓存

浏览器是有自己的缓存机制:强缓存和协商缓存,当我们的静态资源长期不会发生变化时,那么我们就可以通过Cache-control来实现强制缓存,强缓存那些长期没有变化的资源也是能让页面更快的开启的一种方式,同时也可以解决白屏问题。

Webpack解决方案

如果我们使用的脚手架是webpack时,我们可以通过webpack的一个属性实现离线化预渲染prerender-spa-plugin .从而解决白屏问题.

减少Js冗余操作

Js操作过多也可能导致页面加载速度过慢从而使得页面初次加载时出现白屏问题,可以通过常用的性能优化手段来解决这个问题:比如我们在使用百度联想词时候会不断的通过调用API在输入的时候,那么我们就可以利用防抖来实现一个性能优化,防抖就是指不是实时的进行调用联想词API,而是等待特定时间节点内用户没有继续输入时候再调用API,那么就可能实现一个性能优化,从而减少页面执行时间.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/173157.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

企业营销管理能够实现自动化吗?怎么做?

当今企业面临着越来越多的营销难题&#xff1a;如何有效培育潜在客户、如何提高营销活动的效果、如何优化营销资源的分配......企业的营销管理怎么做&#xff1f;或许CRM系统营销自动化会起到作用。 客户细分&#xff1a; 企业可以通过CRM的客户细分功能&#xff0c;根据客户…

C#文件夹基本操作(判断文件夹是否存在、创建文件夹、移动文件夹、删除文件夹以及遍历文件夹中的文件)

判断文件夹是否存在时&#xff0c;可以使用Directory类的Exists()方法或者DirectoryInfo类的Exists属性来实现。 一、判断文件夹是否存在 1.Directory类的Exists()方法 Exists()方法用于确定给定路径是否引用磁盘上的现有目录&#xff0c;语法如下。 public static bool Ex…

cesium雷达扫描圈

import * as Cesium from "cesium"; let lastStage""; // 圆扩散 export function showCircleScan(viewer,lon, lat,color,maxRadius,height) {var cartographicCenter new Cesium.Cartographic(Cesium.Math.toRadians(lon), Cesium.Math.toRadians(lat),…

内衣洗衣机和手洗哪个干净?最好用的迷你洗衣机

随着大家工作的压力越来越大&#xff0c;下了班之后只能想躺平&#xff0c;在洗完澡之后看着还需要手洗的内衣裤真的很头疼。有些小伙伴还有会攒几天再丢进去洗衣机里面一起&#xff0c;而且这样子是非常不好的&#xff0c;用过的内衣裤长时间不清洗容易滋生细菌&#xff0c;而…

单片机学习3——数码管

数码管&#xff0c;根据内部结构&#xff0c;可分为共阴极数码管和共阳极数码管。七段发光管加上一个小数点&#xff0c;共计8段。因此&#xff0c;我们对它编程的时候&#xff0c;刚好是用一个字节。 数码管的显示方式&#xff1a; 1&#xff09;静态显示&#xff1b; 2&…

QT网络协议知识体系(一)

//获取主机的名称和ip地址 //获取主机的所有信息

终于等到你!常用的组织架构图模板,高清图片一键导出

组织架构图是一种用来展示一个组织内部人员和职责关系的图表。通过组织架构图&#xff0c;我们可以清晰地了解一个组织的层级架构和各个部门之间的关系。在本文中&#xff0c;我们将向大家推荐8个常用的组织架构图模板&#xff0c;帮助你快速制作出专业的组织架构图。 1. 市场营…

【Android知识笔记】性能优化专题(二)

Android 内存泄漏原因总结 单例模式持有 Context 对象:由于单例的静态特性使得单例的生命周期和应用的生命周期一样长,如果一个对象已经不需要使用了,而单例对象还持有该对象的引用,那么这个对象将不能被正常回收,这就导致了内存泄漏。 非静态内部类创建的静态成员变量持有…

解决Linux Visual Studio Code显示字体有问题/Liunx下Visual Studio Code更换字体

01、具体问题 在Linux下VsCode控制台与代码区显示异常&#xff0c;如下图所示&#xff1a; 代码显示 终端显示 02、解决方案 下载字体 [rootlocalhost mhzzj]$ cd /usr/share/fonts # 进入目录 [rootlocalhost fonts]$ sudo yum install git # 下载字体 [rootlocalhost fo…

多种 React 组件通信方式实践

在React中&#xff0c;组件之间的通信是一个非常重要的话题。当我们构建复杂的应用程序时&#xff0c;经常需要不同的组件之间共享数据或者进行相互协作。React提供了几种方式来实现跨组件通信&#xff0c;下面我将详细其中几种通信方式&#xff0c;并提供实际的代码示例。 使…

React入门使用 (官方文档向 Part1)

文章目录 React组件:万物皆组件 JSX: 将标签引入 JavaScriptJSX 规则1. 只能返回一个根元素2. 标签必须闭合3. 使用驼峰式命名法给 ~~所有~~ 大部分属性命名&#xff01;高级提示&#xff1a;使用 JSX 转化器 在 JSX 中通过大括号使用 JavaScript使用引号传递字符串使用大括号&…

招投标信息可以用CRM系统来查看吗?

对于B2B企业来说获客难、获客成本高是共识。做大客户的企业通过招投标获取商机是一个重要获客途径&#xff0c;然而传统方式管理招投标信息问题很多&#xff0c;例如资料丢失、手工录入出错、信息分散、信息查找费时费力。为了解决这些难题小编推荐CRM系统&#xff0c;CRM系统需…

Java基础之集合类

Java基础之集合类 一、集合的框架1.1、集合概述1.2、集合与数组区别1.3、数组的缺点&#xff1a;1.4、常用集合分类1.5、Collection常用方法 二、List集合2.1、ArrayList2.2、LinkedList2.3、Vector2.4、区别 三、Set集合3.1、HashSet集合3.2、LinkedHashSet集合3.3、TreeSet集…

Qt 网络通信

获取本机网络信息 &#xff08;1&#xff09;在 .pro 文件中加入 QT network&#xff08;2&#xff09; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QDebug> #include <QLabel> #include <QLineEdit> #include <QPu…

C#中openFileDialog控件的使用方法

目录 一、OpenFileDialog基本属性 二、使用 OpenFile 从筛选的选择中打开文件 1.示例源码 2.生成效果 3. 其它示例 三、使用 StreamReader 以流的形式读取文件 1.示例源码 2.生成效果 四、一种新颖的Windows窗体应用文件设计方法 在C#中&#xff0c;OpenFileDialog控件…

vue3+tsx的使用

<template><div><xiaoman on-click"getItem" name"似懂非懂"></xiaoman></div> </template><script setup langts>import xiaoman from "./App"const getItem(item:any)>{console.log(item,it…

redis引发的一次生产事故,内存爆满

redis引发的一次生产事故 问题描述&#xff1a; 发版后回归测试&#xff0c;不定时出现token失效&#xff0c;导致自动退出到登录界面。如果操作的人员较多&#xff0c;token失效的就比较快&#xff0c;操作的人员较少token失效的相对较慢。 问题复现&#xff1a; 同一账号…

【LeeCode】*904.水果成篮

你正在探访一家农场&#xff0c;农场从左到右种植了一排果树。这些树用一个整数数组 fruits 表示&#xff0c;其中 fruits[i] 是第 i 棵树上的水果 种类 。 你想要尽可能多地收集水果。然而&#xff0c;农场的主人设定了一些严格的规矩&#xff0c;你必须按照要求采摘水果&…

《C++PrimePlus》第10章 对象和类

10.1 过程性编程和面向对象编程 10.2 抽象和类 10.3 类的构造函数和析构函数 类的定义和使用&#xff08;买卖股票&#xff09; 头文件stock10.h #ifndef __STOCK00__H__ #define __STOCK00__H__#include <string>class Stock { // pravate的内容只能通过public访问 p…

简易地铁自动机售票系统实现(C++)

该程序具有以下功能 (1) 一个地铁路线类 Router&#xff0c;包含路线编号&#xff0c;途中的各个站点。可以新增、删除、查询路线&#xff0c;可以根据线路名称&#xff0c;显示线路图片。 (2) 一个地图类 Map&#xff0c;可以显示所有可以乘坐的地铁站名&#xff0c;以及线路…