页面性能和单页面应用特点
1. 使用路由懒加载
- 首屏进入时直接加载和首屏相关路由，其它路由实现懒加载，即
打开路由时再去加载
2. 非首屏组件使用异步组件
- 首屏加载组件时会将所有组件一起加载，所以非屏显示的组件使用异步引入原则
3. 首屏显示的不着急的组件做延迟加载
- 不用第一眼就看到的组件，可以用延迟加载的方法，比如人工等1s后再加载
4. 静态资源放在CDN链
- 俗称 CDN 加速，使得用户访问资源会找离自己物理距离最近的站点去获取资源
5. 减少首屏js，css等资源文件大小
- 俗称 CDN 加速，使得用户访问资源会找离自己物理距离最近的站点去获取资源
6. 图片使用webp格式
- 相同质量下，webp格式的图片体积比JPEG格式图像减少40%，大大减少请求图片时间
7. 使用服务器端渲染，配合redis缓存更好
- 在服务器端就已经获取好数据并组装好HTML了，首屏渲染速度肯定会快于客户端渲染（在客户端需要运行js后再去拿数据）
8. 降低DOM数量 和 层级
- 渲染DOM需要消耗GPU计算的，越复杂的DOM渲染越慢
9. 图片宽度事先定好
- 不然会导致图片宽度数据涌来时，图片的高度变化带来的重排重绘
10. 使用雪碧图、精灵图降低请求数量
- 将多个需要请求的图片合成一张图片来请求
11. 做Loading提示
- 在首屏等待的时候，手动添加loading提示/骨架屏/进度条，从感知上减少用户等待时长
12. Nginx开启Gzip压缩
- 启用Gzip压缩功能，可以使用网站的css、jss、xml、html等静态资源在传输时进行压缩，经过Gzip压缩后资源可以变为原来的30%甚至更小
13. 图片懒加载
- 图片太多不要一起请求，用户看到哪儿就请求哪儿的图片，按需请求，没看到的地方不请求，使用占位图
14. 降低首屏业务接口请求数
- 一个页面最多同时处理6个请求，超过6个请求后就会排队等待，导致页面卡顿
