SPA(单页应用)首屏加载慢的优化方案
一. 什么是首屏加载时间?
首屏加载时间是指浏览器从相应用户输入网址到首屏内容渲染完成的时间。
整个网站并不需要全部加载完成,但需要展示当前可视窗口中的内容,也就是首屏。
从用户的角度来说就是:“输入网址到看到页面具体内容的速度”。
首屏加载时间可以说是用户体验中最重要的环节。
二. 查看我们应用的首屏加载时间?
- 通过
window
下面的一个apiperformance
计算
performance 对象中可以获取到当前页面与性能相关的信息
我们打印看一下 performance
对象
// 计算首屏加载的时间(s)
let awiatTime = (performance.timing.domComplete - performance.timing.navigationStart) / 1000;
2. Chrome
控制台中的Network
直接查看
三. 首屏加载慢的原因?
- 网络延迟
- 入口文件体积过大
- 资源重复请求加载
- 加载脚本过程中,渲染堵塞。
四. 优化方案
- 网络延迟
换个好点的网
入口文件体积过大
路由懒加载:
以函数的形式加载路由,这样就可以把各自的路由文件分别打包,只有在解析给定路由的时候才会加载对应的路由组件。静态资源本地缓存:
合理使用Web Storage
;开启 cdn 加速,缓存静态资源;按需加载:
平常使用的UI框架不要整个引入,只引入项目使用到的组件图片压缩:
项目使用到的 icon图标,并不需要一张张存到本地,可以使用在线图标代替;
资源重复请求加载
一个js脚本被多个路由引入,就造成了重复下载,多个包中就存在多段相同的代码(就是这段js脚本)
在webpack的config文件中,修改CommonsChunkPlugin的配置,设置minChunks为2表示会把使用2次以上的包抽离出来,放进公共依赖文件,避免了重复加载组件
- 加载脚本过程中,渲染堵塞。
使用 SSR
也就是服务端渲染: 即组件和页面通过服务器生成html字符串,再发送到浏览器。vue可以使用Nuxt.js实现服务端渲染。
SPA(单页应用)首屏加载慢的优化方案相关推荐
- SPA单页面应用首屏加载速度提升方法
SPA单页面应用首屏加载速度提升方法 首屏加载 计算首屏加载时间公式 解决方法 减少入口文件体积 静态资源本地缓存 UI框架按需加载 避免组件重复打包 图片资源压缩 开启GZip压缩 首屏加载 首屏加 ...
- 单页应用的优缺点,单页应用首屏加载优化、小程序首次启动速度优化
单页应用的优缺点 单页应用,简称(Single Page Application)是指整个应用只一个HTML页面,所有的功能和交互都在这个页面完成,利用JavaScript动态改变HTML内容. 优点 ...
- 浅谈Vue单页应用首屏加载速度优化方案
心语:最不会利用时间的人,最会抱怨时间不够 趁着五一放假,刚好最近天气也是不好,.所以抽出一点时间写一点东西,也算是不辜负这个美好的假期吧!小编也祝愿大家五一快乐,玩得愉快哈 随着各大前端框架的诞生以 ...
- VUE单页应用首屏加载速度优化方案
单页应用会随着项目越大,导致首屏加载速度很慢!!!以下给出在下知道的几种优化方案 使用CDN资源,减小服务器带宽压力 路由懒加载 将一些静态js css放到其他地方(如OSS),减小服务器压力 按需加 ...
- 单页应用首屏加载速度慢怎么解决?
1.什么是首屏加载时间? 首屏加载时间是指浏览器从相应用户输入网址到首屏内容渲染完成的时间,从用户的角度来说就是:"地址栏输入网址之后网页呈现的速度".整个网站并不需要全部加载完成 ...
- vue单页应用首屏加载速度慢如何解决
首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间. 一.加载慢的原因 在页面渲染的过程,导致加载速度慢的因素可能如下: 网络延时问 ...
- 面试官:SPA(单页应用)首屏加载速度慢怎么解决?
故心故心故心故心小故冲啊 文章目录 一.什么是首屏加载 二.加载慢的原因 三.解决方案 小结: 参考文献 一.什么是首屏加载 首屏时间(First Contentful Paint),指的是浏览器从响 ...
- Vue复习笔记 (二)SPA单页面应用(优化首屏加载)
一.概念 SPA(single-page application):通过动态重写当前页面来与用户交互 代码通过单个页面的加载而检索,或者动态装载适当的资源并添加到页面 JS框架如 react, vue ...
- [vue] SPA首屏加载速度慢的怎么解决?
[vue] SPA首屏加载速度慢的怎么解决? 1.通过Gzip压缩 2.使用路由懒加载 3.利用webpack中的externals这个属性把打包后不需要打包的库文件都分离出去,减小项目打包后的大小 ...
最新文章
- STM32F0使用LL库实现Modbus通讯
- R语言dplyr包recode函数、recode_factor函数数值或因子替换实战
- 中国大学MOOC 人工智能导论第三章测试
- hdu 5036 Explosion bitset优化floyd
- 数组concat_js 标准二维数组变一维数组的方法
- 虚拟化部署之创建Hyper-V虚拟硬盘
- L1-047 装睡-PAT团体程序设计天梯赛GPLT
- xpath 第一个元素_Chrome控制台的妙用之使用XPATH
- android 中如何监听耳机键消息
- 一文看懂阿里、京东、滴滴大数据架构变迁
- iframe 父页面与子页面之间的方法、属性的相互调用
- Java项目——Everything 开发思路
- springboot 整合 shiro (Web Applications)避坑一 ,请看shiro官网
- matlab晶闸管整流电路,整流电路MATLAB仿真实验
- NDTTS-II变压器综合试验系统
- bcnf分解算法_BCNF范式及其分解方法(对一次Lab作业的总结)
- 图灵机器人不再免费(19.9元),获取调用api的key,实名认证遇到413 Request Entity Too Large问题
- 信息学奥赛一本通 1293:买书 | OpenJudge NOI 2.6 6049:买书
- java 判断是不是昨天、今天、明天
- Eclips注释模板的使用