web的首屏加载优化

白屏加载和首屏加载时间的区别

白屏时间是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。

首屏时间是指浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但在当前视窗的内容需要。

白屏时间是首屏时间的一个子集。

被忽视的首屏加载

用户体验对web网页来说很重要，而首屏加载是用户体验中最重要的环节之一，可能没有之一。然而现在的很多前端开发者，都没能重视对首屏加载的优化。

正常来说，首屏加载时间不应该超过2s。有些成熟的网页比如京东和淘宝，虽然页面模块非常多且复杂，但通过优化，首屏加载时间却不长。

如果一个页面完成首屏加载需要5秒以上，可能用户下次就从心理排斥打开这个页面。换言之，首屏加载时间对用户留存率影响很大。

如何优化首屏加载时间

1.cdn分发（减少传输距离）。通过在多台服务器部署相同的副本，当用户访问时，服务器根据用户跟哪台服务器距离近，来决定哪台服务器去响应这个请求。

2. 后端在业务层的缓存。数据库查询缓存是可以设置缓存的，这个对于处于高频率的请求很有用。浏览器一般不会对content-type: application/json；的接口进行缓存，所以有时需要我们手动地为接口设置缓存。比如一个用户的签到状态，它的缓存时间可以设置到明天之前。

3. 静态文件缓存方案。这个最常看到。现在流行的方式是文件hash+强缓存的一个方案。比如hash+ cache control: max-age=1年。

4. 前端的资源动态加载：

a. 路由动态加载，最常用的做法，以页面为单位，进行动态加载。
b. 组件动态加载(offScreen Component)，对于不在当前视窗的组件，先不加载。
c. 图片懒加载(offScreen Image)，同上。值得庆幸的是，越来越多的浏览器支持原生的懒加载，通过给img标签加上loading="lazy来开启懒加载模式。

5. 减少请求的数量。这点在http1.1的优势很明显，因为http1.1的请求是串行的（尽管有多个tcp通道），每个请求都需要往返后才能继续下个请求。此时合并请求可以减少在路途上浪费的时间，此外还会带来重复的请求头部信息（比如cookie)。在http2.0中这个问题会弱化很多，但也有做的必要。

6. 页面使用骨架屏。意思是在首屏加载完成之前，通过渲染一些简单元素进行占位。骨架屏的好处在于可以减少用户等待时的急躁情绪。这点很有效，在很多成熟的网站（京东、淘宝、Youtube）都有大量应用。没有骨架屏的话，一个loading的菊花图也是可以的。

7. 使用ssr渲染。

8. 引入http2.0。http2.0对比http1.1，最主要的提升是传输性能，在接口小而多的时候会更加明显。

9. 利用好http压缩。即使是最普通的gzip，也能把bootstrap.min.css压缩到原来的17%。可见，压缩的效果非常明显，特别是对于文本类的静态资源。另外，接口也是能压缩的。接口不大的话不用压缩，因为性价比低（考虑压缩和解压的时间）。

10. 利用好script标签的async和defer这两个属性。功能独立且不要求马上执行的js文件，可以加入async属性。如果是优先级低且没有依赖的js，可以加入defer属性。

11. （少用）选择先进的图片格式。使用 WebP 的图片格式来代替现有的jpeg和png，当页面图片较多时，这点作用非常明显。把部分大容量的图片从BaseLine JPEG切换成Progressive JPEG（理解这两者的差别）也能缩小体积。

12. （少用）渲染的优先级。浏览器有一套资源的加载优先级策略。也可以通过js来自己控制请求的顺序和渲染的顺序。一般我们不需要这么细粒度的控制，而且控制的代码也不好写。

13. （少用）前端做一些接口缓存。前端也可以做接口缓存，缓存的位置有两个，一个是内存，即赋值给运行时的变量，另一个是localStorage。比如用户的签到日历（展示用户是否签到），我们可以缓存这样的接口到localStorage，有效期是当天。或者有个列表页，我们总是缓存上次的列表内容到本地，下次加载时，我们先从本地读取缓存，并同时发起请求到服务器获取最新列表。