Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

首屏加载速度慢怎么解决？遇到这个问题我们首先应该弄清楚

1. 什么是首屏加载时间？
2. 如何计算首屏加载时间？
3. 为什么首屏加载速度会慢，是什么原因导致的？
4. 怎么去解决速度慢的问题？

什么是首屏加载时间

首屏加载时间是指浏览器从相应用户输入网址到首屏内容渲染完成的时间，从用户的角度来说就是：“地址栏输入网址之后网页呈现的速度”。整个网站并不需要全部加载完成，但需要展示当前可视窗口中的内容。

如何计算首屏加载时间

其实很简单，并不需要我们手动去计算。打开F12控制台，然后刷新网页，其中Load就是首屏加载时间

首屏加载的快慢严重影响用户体验，影响用户对网站的认可度。因此，我们要搞清楚到底是什么拖慢了我们的首屏加载速度。只有找到原因我们才能“对症下药”找到合适的解决方法。

首屏加载速度慢的原因

这里列举了几个非常常见的原因：

1. 网络延时
2. 文件体积过大
3. 接口重复请求

如何解决

针对这些问题，我暂且找到几种常见的解决方案

1. 网络延时
   这种客观原因，我们就没法儿通过代码解决了，换个快点的网就好了。
2. 文件体积过大

有时候我们可能不可避免的需要引入其他很多文件，比如图片或者其他静态资源，又不能删，那怎么办呢？不要慌，方法还是有的，能压缩的压缩，能缓存的缓存等等。

• 路由懒加载

以函数的形式加载路由，这样就可以把各自的路由文件分别打包，只有在解析给定路由的时候才会加载对应的路由组件。

• 静态资源本地缓存

前端合理使用localStorage，sessionStorage等缓存方式。
接口采用http缓存，合理设置cache-control等请求头。

• 按需加载

我们在引入elementUI或者antdesign等UI组件时，并不需要一次性完整引入，只需要将我们需要的组件引入即可。

• 图片压缩

像一些icon图标，我们并不需要在本地存放一张张的图片，可以用在线字体图标代替，或者将多个图标合并到一张图上，以减轻请求压力。

• 减少重复请求

像一些表单提交或者长列表，合理使用防抖节流，以减少不必要的请求，减轻服务器压力。