vue项目的首屏优化策略

虽然标题是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个请求后就会排队等候，导致页面卡顿；