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. 骨架屏。饿了么团队开源了自动生成工具