寫在前面
本文首發於公衆號：符合預期的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對網頁首屏速度的影響。
實驗指標
首先明確一下實驗指標：
- 指標①：頁面fetchStart到window.onload觸發時的耗時。
- 指標②：頁面fecthStart到最外層組件的componentDidMount觸發時的耗時。
- 指標③：FP，頁面首次繪製的時間點。
- 指標④：FCP，頁面首次內容繪製的時間點。
關於首屏速度的更多指標，可以參考我之前寫的這篇文章：
當考慮網頁首屏加速的時候，我們在考慮什麼
小流量實驗
我通過用戶id將頁面的流量均分成了兩組，對照組A，實驗組B。
- 對照組A：不包含service worker邏輯，完全走之前的頁面加載模式。
- 實驗組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來優化首屏速度呢？我覺得主要是以下兩個場景：
- 老用戶回訪率很高的業務。老用戶回訪時，service worker已經劫持了網絡請求，靜態文件是可以通過service worker加載的。如果每天的頁面pv裏，大部分都是新用戶，從整體上看，service worker並不能發揮作用，並且維護service worker本身也是需要一定的成本的，就沒有必要上service worker了。
- 頁面之間相互依賴。比如說有一個入口A頁面，A頁面可以跳轉到B頁面，那麼可以在A頁面中使用service worker將B頁面的靜態文件也緩存下來，這樣可以較大幅度地提高B頁面的首屏速度。
寫在後面
本文通過實驗，收集了詳細的數據，研究了service worker在首屏加速問題上的表現。雖然最終並沒有在業務中採用service worker來加速首屏，但是在過程中也收穫了很多的東西，符合預期。
