WebApp 首屏优化

背景

在进行 webapp 开发时，如果使用 vue 或者 react 类似的框架，并且采用的单页应用的模式，那首屏加载肯定会遇到白屏时间过长的问题。

如果我们只是自己写个 demo，那么等待一会没有任何关系。但是如果是一个商业应用，那你可能会因此流失一批客户。

一般来说如果 3 秒钟，网页没有打开，20% 的新用户会直接离开。剩下的会进行刷新操作，如果还是没有打开，60% 的新用户会离开。其实这个时候你的应用曝光的机会已经很渺茫了。

因素

影响首屏加载快慢的因素有很多。我们主要有以下几个方面：

1. 内容
2. 服务器
3. Cookie
4. CSS
5. JavaScript
6. Image

解决

其实总的来说，最为根本的就是加快 http 请求速度，减小 http 请求数量。

减少 http 请求数量

我们先从减少 http 请求开始：

1. 使用缓存。如强缓存和协商缓存
2. 图片精灵技术。将一些小的图标合成在一张大图上，使用 CSS 中的 background-position 属性去定位到想要的图标
3. 可以将一些复用度比较高的图片转为 Base64。跟随 CSS 或者 JS 文件一起返回
4. 合并 CSS 或 JS 文件。可以将多个体积较小的 CSS 或 JS 文件合并后返回

加快 http 请求速度

再说加快 http 请求速度：

1. 使用 CDN 服务。CDN 服务可以对网络线路进行优化，就近原则
2. 使用独立的图片域名服务器。浏览器默认同一域名同时只能进行一定数量的请求（每个浏览器厂商有所差异），所以使用不同的域名能提高 http 请求的并发数
3. 使用 gzip 对传输内容进行压缩
4. 压缩 CSS 和 JS 体积
5. 去掉无用的 CSS 和 JS 代码
6. 可以使用 webp 格式的图片。webp 格式在相同的画质下，比 png 和 jpg 的体积 40% 左右
7. 减少 cookie 体积。浏览器发送请求时，会默认携带 cookie

首屏渲染

1. 将 CSS 放在 head 中，将 JS 放在底部。减少阻塞渲染的 CSS 和 JS
2. 将首屏非必须的 CSS 或者 JS 文件延迟加载
3. 对于图片可以进行懒加载
4. 预加载关键请求。比如 Hybrid App中，可以在原生中发送数据请求，打开 H5 页面时，直接从原生拿到数据，而不用在 H5 页面中发送
5. 服务端渲染。服务端直接返回解析好的页面，这样可以减少文件体积和浏览器解析 JS 渲染页面的时间

体验优化

1. loading 旋转动画
2. 进度条
3. 骨架屏。饿了么团队开源了一个自动生成骨架屏的工具

参考：https://web.dev/fcp