vue :SPA首屏加载速度慢的怎么解决?

一、什么是首屏加载

首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容

首屏加载可以说是用户体验中最重要的环节

关于计算首屏时间

利用performance.timing提供的数据:

image.png

通过DOMContentLoad或者performance来计算出首屏时间

// 方案一:
document.addEventListener('DOMContentLoaded', (event) => {console.log('first contentful painting');
});
// 方案二:
performance.getEntriesByName("first-contentful-paint")[0].startTime// performance.getEntriesByName("first-contentful-paint")[0]
// 会返回一个 PerformancePaintTiming的实例,结构如下:
{name: "first-contentful-paint",entryType: "paint",startTime: 507.80000002123415,duration: 0,
};

二、加载慢的原因

在页面渲染的过程,导致加载速度慢的因素可能如下:

  • 网络延时问题
  • 资源文件体积是否过大
  • 资源是否重复发送请求去加载了
  • 加载脚本的时候,渲染内容堵塞了

三、解决方案

常见的几种SPA首屏优化方式

  • 减小入口文件积
  • 静态资源本地缓存
  • UI框架按需加载
  • 图片资源的压缩
  • 组件重复打包
  • 开启GZip压缩
  • 使用SSR

减小入口文件体积

常用的手段是路由懒加载,把不同路由对应的组件分割成不同的代码块,待路由被请求的时候会单独打包路由,使得入口文件变小,加载速度大大增加

image.png

vue-router配置路由的时候,采用动态加载路由的形式

routes:[ path: 'Blogs',name: 'ShowBlogs',component: () => import('./components/ShowBlogs.vue')
]

以函数的形式加载路由,这样就可以把各自的路由文件分别打包,只有在解析给定的路由时,才会加载路由组件

静态资源本地缓存

后端返回资源问题:

  • 采用HTTP缓存,设置Cache-ControlLast-ModifiedEtag等响应头

  • 采用Service Worker离线缓存

前端合理利用localStorage

UI框架按需加载

在日常使用UI框架,例如element-UI、或者antd,我们经常性直接引用整个UI

import ElementUI from 'element-ui'
Vue.use(ElementUI)

但实际上我用到的组件只有按钮,分页,表格,输入与警告 所以我们要按需引用

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)

件重复打包

假设A.js文件是一个常用的库,现在有多个路由使用了A.js文件,这就造成了重复下载

解决方案:在webpackconfig文件中,修改CommonsChunkPlugin的配置

minChunks: 3

minChunks为3表示会把使用3次及以上的包抽离出来,放进公共依赖文件,避免了重复加载组件

图片资源的压缩

图片资源虽然不在编码过程中,但它却是对页面性能影响最大的因素

对于所有的图片资源,我们可以进行适当的压缩

对页面上使用到的icon,可以使用在线字体图标,或者雪碧图,将众多小图标合并到同一张图上,用以减轻http请求压力。

开启GZip压缩

拆完包之后,我们再用gzip做一下压缩 安装compression-webpack-plugin

cnmp i compression-webpack-plugin -D

vue.congig.js中引入并修改webpack配置

const CompressionPlugin = require('compression-webpack-plugin')configureWebpack: (config) => {if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置...config.mode = 'production'return {plugins: [new CompressionPlugin({test: /\.js$|\.html$|\.css/, //匹配文件名threshold: 10240, //对超过10k的数据进行压缩deleteOriginalAssets: false //是否删除原文件})]}}

在服务器我们也要做相应的配置 如果发送请求的浏览器支持gzip,就发送给它gzip格式的文件 我的服务器是用express框架搭建的 只要安装一下compression就能使用

const compression = require('compression')
app.use(compression())  // 在其他中间件使用之前调用

使用SSR

SSR(Server side ),也就是服务端渲染,组件或页面通过服务器生成html字符串,再发送到浏览器

从头搭建一个服务端渲染是很复杂的,vue应用建议使用Nuxt.js实现服务端渲染

小结:

减少首屏渲染时间的方法有很多,总的来讲可以分成两大部分 :资源加载优化 和 页面渲染优化

下图是更为全面的首屏优化的方案

image.png

大家可以根据自己项目的情况选择各种方式进行首屏渲染的优化

参考文献

  • https://zhuanlan.zhihu.com/p/88639980?utm_source=wechat_session
  • https://www.chengrang.com/how-browsers-work.html
  • https://juejin.cn/post/6844904185264095246
  • https://vue3js.cn/docs/zh

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

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

相关文章

2023.12.18 JAVA学习day03,while与for循环

目录 0.switch 判断语句 一.for循环 1.简单练习 2.使用for循环计算1-100求和, 以及偶数求和 3.进阶练习,配合键盘录入与判断使用循环 二.while循环 三种格式的区别: 0.switch 判断语句 switch (表达式) { case 1: 语句体1; break; case …

核和值域的关系:什么是矩阵的秩?

核和值域的关系:什么是矩阵的秩? 这篇博客将介绍一个任意矩阵的核和值域的关系,并由此说明矩阵秩的意义、子空间维数、子空间正交。 1、矩阵的核:N(A) A ∈ C m n A\in C^{m\times n} A∈Cmn,矩阵的核,记…

智能手表上的音频(五):录音

上篇讲了语音通话,本篇讲录音。录音功能就是把录到的音频保存成文件。保存文件的格式支持两种:一是PCM(16K采样)的WAV格式,二是AMR-NB(8k采样)的AMR格式。WAV格式简单:44字节的文件头PCM 数据,示…

java21特性学习

jdk21下载地址 JDK21文件 JDK21是javaSE平台最新的长期支持版本。 Java SE Java Archive | Oracle JDK21版本说明 JDK 21 Release Notes, Important Changes, and Information JavaSE 版本字符串格式 Version-String Format JavaSE平台采用了基于时间的发布模型,JDK每六个…

java --- 异常

目录 一、异常体系介绍 二、异常的作用 三、异常处理方式 3.1 捕获异常 2.1 灵魂一问: 如果try中没有遇到问题,如何执行? 2.2 灵魂二问:如果try中可能会遇到多个问题,怎么执行? 2.3 灵魂三问&#x…

安卓小练习-校园闲置交易APP(SQLite+SimpleCursorAdapter适配器)

环境: SDK:34 JDK:20.0.2 编写工具:Android Studio 2022.3.1 整体效果(视频演示): 小练习-闲置社区APP演示视频-CSDN直播 部分效果截图: 整体工作流程: 1.用户登录&…

FPGA实现 TCP/IP 协议栈 客户端 纯VHDL代码编写 提供4套vivado工程源码和技术支持

目录 1、前言版本更新说明免责声明 2、相关方案推荐我这里已有的以太网方案1G 千兆网 TCP-->服务器 方案10G 万兆网 TCP-->服务器客户端 方案常规性能支持多节点FPGA资源占用少数据吞吐率高低延时性能 4、TCP/IP 协议栈代码详解代码架构用户接口代码模块级细讲顶层模块PA…

http状态码(一)400报错

一 400报错汇总 ① 综述 一、4xx状态码报错说明: 客户端行为导致的报错二、通用的4xxHTTP报错1) 4002) 4013) 4034) 4045) 405 --> 不允许方法,可能跨域或者nginx限制请求方法6) 4087) 4138) 419三、ngin自身定义的4xx报错495、496、497、498、4…

【数据集】土壤含水量数据集总结:GLDAS-2.0

土壤含水量数据集 1 Global Land Data Assistance System Version 2 (GLDAS-2.0)2 基于AMSR-E和AMSR2数据的全球长时序日尺度土壤水分数据集2.1 数据下载2.2 数据文件命名方式和使用方法参考土壤水分连接陆气之间的水热交换过程,是地球系统过程的重要参数,精准的土壤水分信息…

keithley 吉时利6221源表

特点 优势 10 14 Ω 输出阻抗 提供广泛的输出阻抗,确保负载中有稳定的电流源。 65000 点源内存 允许直接从电流源执行全面的测试电流扫描。 输出 0.1V 至 105V 的恒流电压,10mV 步长 防止潜在损坏对过电压敏感的设备。 源交流电源范围为 4pA 至…

vue门户设计器实现技术方案

一、什么是门户设计器 门户设计器是一种用于创建和设计门户网站或者应用系统首页的工具。它通常是一个软件应用程序,可以帮助用户快速、轻松地设计和构建自己的门户网站或者应用系统的首页。门户设计器通常提供在线拖拉拽设计器,以及各种模板、主题和组…

LWIP源码认识记录

1、内核:\src\core的各源文件含义 2、demo例程与移植:lwip\lwip-contrib

地级市ZF工作报告文本分析-ZF数字关注度(2005-2023)

数据简介: 数据来源:各政府工作报告时间跨度:2005-2023年数据范围:安康、安庆、安顺、安阳、鞍山、巴彦淖尔、巴中、白城、白山、白银、蚌埠、包头、保山、北京、本溪、滨州、亳州、常德、常州、朝阳、潮州、郴州、成都、池州、赤…

leetcode188. 买卖股票的最佳时机 IV

题目链接:leetcode 188 1.题目 给你一个整数数组 prices 和一个整数 k ,其中 prices[i] 是某支给定的股票在第 i 天的价格。 设计一个算法来计算你所能获取的最大利润。你最多可以完成 k 笔交易。也就是说,你最多可以买 k 次,卖…

Spring Integration接收TCP与UDP请求

1. 简介 Spring Integration 是一个开源的项目,它是 Spring 生态系统的一部分,旨在简化企业集成(Enterprise Integration)的开发。它提供了一种构建消息驱动的、松散耦合的、可扩展的企业应用集成解决方案的方式。Spring Integra…

ChatGPT如何做科研??

2023年我们进入了AI2.0时代。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义,不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车,就有可能被淘汰在这个数字化时代,如何能高效地处理文本、文献查阅、PPT…

正反哈希两种版子

1:这种版子开的二维数组更合理,用于单个字符串的最大长度,未知的情况,但是第二维大小只为2,故可以满足大部分情况 #define int unsigned long long int n; int p[N]; int h[N][2]; int l[N], r[N]; int get1(int l, i…

cudnn8.1.1,cuda11.2的ldconfig报错

配置CUDNN遇到问题 /sbin/ldconfig.real: /usr/local/cuda-11.0/targets/x86_64-linux/lib/libcudnn_ops_train.so.8 is not a symbolic link /sbin/ldconfig.real: /usr/local/cuda-11.0/targets/x86_64-linux/lib/libcudnn_ops_infer.so.8 is not a symbolic link /sbin/l…

酒精壁炉,现代取暖的便携选择

酒精壁炉作为现代室内取暖的一种选择,具有独特的特点和工作原理。酒精壁炉采用酒精作为燃料,为家庭提供舒适的温暖,同时具备一定的安全性和便携性。 酒精壁炉通常由金属或陶瓷制成,内部设有专门的燃烧器,用于燃烧酒精燃…

Discord Midjourney 安装使⽤教程(AI绘画)

安装步骤: 1.注册Discord账号 2.进⼊Midjourney社区创作 3.创建⾃⼰服务器 安装教程: 1.注册Discord账号 账号注册的方式: 注册地址: //账号注册地址https://discord.com/ 2.进⼊Midjourney社区创作 // 邀请链接: 官方的midjourneyhttps://discord.gg/midjo…