首屏时间:浏览器从输入网址到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容
加载慢的原因:
1、网络延时问题
2、资源文件体积是否过大
3、资源是否重复发送请求去加载了
4、加载脚本的时候,渲染内容堵塞了
常见的优化方式主要分为资源加载优化和页面渲染优化:
1、前端合理利用localStorage,后台返回资源采用HTTP缓存,设置Cache-Control,Last-Modified,Etag等响应头,采用Service Worker离线缓存,实现静态资源本地缓存
2、UI框架按需加载,譬如只需要用到UI库中的某个组件时,单独引用
3、图片资源的压缩
4、组件重复打包
5、开启GZip压缩
6、使用Nuxt.js实现服务端渲染
7、使用路由懒加载,把不同路由对应的组件分割成不同的代码块,待路由被请求的时候会单独打包路由,使得入口文件变小,加载速度大大增加