使用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來加速首屏，可是在過程當中也收穫了不少的東西，符合預期。