持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情
一. 什么是首屏加载时间？
首屏加载时间是指浏览器从相应用户输入网址到首屏内容渲染完成的时间。
整个网站并不需要全部加载完成，但需要展示当前可视窗口中的内容，也就是首屏。
从用户的角度来说就是：“输入网址到看到页面具体内容的速度”。
首屏加载时间可以说是用户体验中最重要的环节。
首屏加载
就是从输入网址址，到所有资源渲染到页面，首屏加载可以说是用户体验中最重要的环节，由于单页面应用，资源体积过大，首次进行全部加载耗时，导致白屏
加载过慢
在页面渲染的过程，导致加载速度慢的因素可能如下：
- 网络延时问题
- 资源文件体积是否过大
- 资源是否重复发送请求去加载了
- 加载脚本的时候，渲染内容堵塞了
解决方法
减小入口文件体积
比如路由懒加载和异步组件，配置路由时采用动态加载路由形式
{
path: '/404',
component: () => import('@/views/404'),
},
静态资源本地缓存
采用强制缓存和协商缓存，设置Cache-Control, Last-Modified, Etag字段
合理利用localStorage
UI框架按需加载
例如使用element-ui框架时， 使用组件不要全部将整个框架导入，应该按需导入
全部导入：
import ElementUI from 'element-ui'
Vue.use(ElementUI)
按需导入：
import { Button, Input } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
图片资源的压缩
将小图片base64化，或者使用在线字体图标、雪碧图减少服务器压力
使用SSR
SSR（Server side ），也就是服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器
从头搭建一个服务端渲染是很复杂的, Vue应用建议使用Nuxt.js实现服务端渲染
