使用service worker作缓存来加快首屏速度，可行么？

写在前面

本文首发于公众号：符合预期的CoyPan

不久以前，我简单探索了service worker在一个活动运营页面中的应用，能够参考我以前的这篇文章：

service worker轻度探索 - 解决运营活动需求中的图片加载问题?

那个时候，我就发现了一个现象：一张图片从service worker中加载的耗时，大于其从浏览器缓存中加载的耗时。最近在作页面首屏性能优化的相关工做，那么service worker能让页面首屏加载变快么？

业务场景

首先明确一下业务场景：一个App的h5分享页。这个分享页是一个使用react开发的单页应用，用户的交互只会停留在这个页面，不会跳转到其余的页面。业务中使用service worker来缓存静态资源(js，css)，逻辑很简单，就是在service worker初始化的时候，将页面的静态资源缓存下来，后续访问页面时，能够直接从service worker中加载静态资源。有一个点须要注意，service worker的优先级是高于浏览器自带缓存的。目标是探索service worker是否可以加快页面首屏速度。

探索service worker的效果

针对本文提到的业务场景，我设计了小流量实验来验证service worker对网页首屏速度的影响。

实验指标

首先明确一下实验指标：

1. 指标①：页面fetchStart到window.onload触发时的耗时。
2. 指标②：页面fecthStart到最外层组件的componentDidMount触发时的耗时。
3. 指标③：FP，页面首次绘制的时间点。
4. 指标④：FCP，页面首次内容绘制的时间点。

关于首屏速度的更多指标，能够参考我以前写的这篇文章：

当考虑网页首屏加速的时候，咱们在考虑什么

小流量实验

我经过用户id将页面的流量均分红了两组，对照组A，实验组B。

1. 对照组A：不包含service worker逻辑，彻底走以前的页面加载模式。
2. 实验组B：包含service worker逻辑，使用service worker劫持网页中的静态资源请求。

在实验组B中，包含了如下多种状况：

• 实验组B1: 浏览器根本就不支持service worker。
• 实验组B2: 浏览器支持service worker，本次pv时，service worker进行初始化。
• 实验组B3: 浏览器支持service worker，本次pv时，service worker已经劫持了静态资源请求，静态资源是从service worker中加载的。

实验结果

直观对比

我统计了5个天然天里，各个指标的50分位值，60分位值，90分位值和平均数。咱们先来直观地看下A组和B组各个指标的50分位值的对比吧。

从上面的直观对比能够看出，4个指标，B组的50分位值都略微大于A组的50分位值，差距在几十毫秒左右。

其实，各个指标的50分位值，60分位值，90分位值和平均数，都是B组的值略大于A组的值。

到这里，其实已经能够得出一个结论了：在本文所描述的业务场景中，service worker并不能提升首屏速度。

详细数据

下面是本次实验的详细数据。

首先给出一个上图看不出来的数据：

在实验组B中，B1，B2，B3三个组的PV占比大体为：20%，46%，34%。

接着，从上面的数据中，能够发现几个比较有意思的点：

• 那些根本不支持service worker的浏览器，他们的指标①和指标②实际上是挺快的。
• 不支持service worker的浏览器，也不支持FP和FCP这两个指标。
• service worker初始化时，会拖慢全部的指标，也就是说，会影响页面的首屏速度。
• 当service worker已经劫持了网络请求，静态文件经过sw加载时，全部的指标都是最快的，能够提高首屏速度。

思考总结

从详细数据来看，若是静态文件经过service worker加载时，确实能够较大幅度提升首屏速度。可是从总体的效果上来看，service worker并不能提升首屏速度，甚至还会略微下降首屏速度。这是由业务场景决定的。最终，我也没有采用service worker来优化首屏速度。

那么，什么状况下，能用service worker来优化首屏速度呢？我以为主要是如下两个场景：

1. 老用户回访率很高的业务。老用户回访时，service worker已经劫持了网络请求，静态文件是能够经过service worker加载的。若是天天的页面pv里，大部分都是新用户，从总体上看，service worker并不能发挥做用，而且维护service worker自己也是须要必定的成本的，就没有必要上service worker了。
2. 页面之间相互依赖。好比说有一个入口A页面，A页面能够跳转到B页面，那么能够在A页面中使用service worker将B页面的静态文件也缓存下来，这样能够较大幅度地提升B页面的首屏速度。

写在后面

本文经过实验，收集了详细的数据，研究了service worker在首屏加速问题上的表现。虽然最终并无在业务中采用service worker来加速首屏，可是在过程当中也收获了不少的东西，符合预期。

---