vue项目的首屏优化策略

2024-04-06 10:50:25

虽然标题是vue项目的首屏优化策略，但是里面绝大部分的方法，对于其他语言写成的单页应用同样适用

1、使用路由懒加载

首屏进入时，直接加载和首屏相关路由，其他全部路由组件实现懒加载，即打开该路由时再去加载；

2、非首屏的组件使用异步组件

在首屏加载组件时会将所有组件一起加载，不是在首屏就显示的组件请使用异步引入的原则；

3、首屏显示的不着急的组件做延迟加载

不用第一眼就引入眼帘的首屏组件，可以用延迟加载的方法，比如人工等个1s后再加载；

4、静态资源放在CDN链

俗称CDN加速，使得用户访问资源会找离自己物理距离最近的站点去获取资源；

5、减少首屏的js，css等资源文件大小

用一些压缩工具压缩资源

6、图片使用webp格式

相同质量下，webp格式的图片体积比JPEG格式图像减小40%，大大减少请求图片时间；

7、使用服务器端渲染，配合redis缓存更好

在服务器端就已经获取好数据并组装好HTML了，首屏渲染速度肯定会快于客户端渲染（在客户端需要运行js后再去拿数据）；

8、降低DOM数量和层级

渲染DOM是需要消耗GPU计算的，越复杂的DOM渲染越慢；

9、图片宽高事先定好

不然会导致图片宽高数据涌来时，图片的高度变化带来的重排重绘；

10、使用雪碧图/精灵图降低请求数量

将多个需要请求的图片合成一张图片来请求

11、做Loading提示

在首屏等待的时候，手动添加loading提示/骨架屏/进度条，从感知上减少用户等待时长；

12、Nginx开启Gzip压缩

启用Gzip压缩功能, 可以使网站的css、js 、xml、html 等静态资源在传输时进行压缩,经过Gzip压缩后资源可以变为原来的30%甚至更小

13、图片懒加载

图片太多不用一起请求，用户看到哪儿就请求哪儿的图片，没看到的地方不请求，放个占位图；

14、降低首屏业务接口请求数

一个页面最多同时处理6个请求，超过6个请求后就会排队等候，导致页面卡顿；

vue项目的首屏优化策略相关推荐

vue路由懒加载_优化vue项目的首屏加载速度
最近使用vue-cli3构建了一个小型的博客系统,完工之后,build打包出来发现一个chunk-vendors包就有1.1m,部署上去之后,访问的时候,首屏加载非常慢.居然需要21s,体验极差. 这 ...
nginx加载图片慢_优化vue项目的首屏加载速度
最近使用vue-cli3构建了一个小型的博客系统,完工之后,build打包出来发现一个chunk-vendors包就有1.1m,部署上去之后,访问的时候,首屏加载非常慢.居然需要21s,体验极差. 这 ...
移动spa商城优化记（一）---首屏优化篇
背景随着公司业务的不断壮大,最近老是有用户反应公司APP内的商城打开比较慢,这可不行啊,慢了容易流失用户,流失用户减少公司业绩,公司业绩少我的年终奖就少----,所以为了公司,也为了自己,开始优化之 ...
时间都去哪了-移动Web首屏优化实践
时间都去哪了-移动Web首屏优化实践首屏时间可用性的前提,后面用户是否使用你app很重要的因素之一: 我们PC上访问其实现在的带宽已经很好了,百兆光宽带,但是在移动端就不一样了,很多用户还是使用的 ...
【前端面试】首屏优化
[前端面试]首屏优化多一些不为什么的坚持
VUE 项目实现大屏展示的响应式
vue项目实现大屏展示自适应问题此处的项目为vue2版本,因为pc端的项目没有采用响应式自适应手机端的设计,所以使用lodash插件实现屏幕移动端自适应. 首先下载lodash插件. npm i ...
vue项目实现大屏展示自适应问题
vue项目实现大屏展示自适应问题此处的项目为vue2版本,因为该项目立项阶段未要求兼容大屏设备和移动端设备,原设计稿尺寸1920X1080像素,如何实现响应式布局. 一.安装 postcss-px ...
Vue项目的打包\部署\优化
Vue项目的打包\部署\优化如果有帮助到你麻烦点个赞或者收藏 +关注哟以后会经常发布一些干货文章我只是一个前端小菜鸟,大佬勿喷! 一.nginx 开启 gzip 理论上,nginx 开启 ...
vue项目实现大屏PC端字体自适应
vue项目实现大屏PC端字体自适应我们字体自适应选择使用rem作为单位,通过监听窗口大小的变化,更新1rem的对应的px数来实现字体自适应. 注意该方法,我们需要在APP.vue文件中实现, 首先A ...

最新文章

热门文章