PWA-PLUS 項目接入性能分析報告

做者：謝維
閱讀時間：15~20 min

背景

Now交友運營活動此前主要注重提高開發效率，在性能優化這塊有所欠缺。近期在Now交友的常規活動項目中嘗試接入了PWA-PLUS方案和Aegis測速方案，並在Now交友週年慶我的賽活動中上線驗證，本文整理了接入效果對比和數據分析，並總結接入心得和問題，供你們參考。

PWA-PLUS方案是咱們團隊針對PWA技術提出的一套性能優化方案，能夠利用ServiceWorker的能力對頁面加載資源進行緩存，提高頁面加載性能。(目前僅在騰訊內部開源，後期會開源)

Aegis則是咱們團隊開源的一站式前端監控平臺，涵蓋了日誌上報，錯誤監控，性能監控，資源測速等功能。「首屏渲染時間」 的計算大多數時候是依靠人工打點，但Aegis提供了一種「無打點測速上報」的思路，能夠簡化測速上報的開發。

接入項目：NOW交友常規活動 應用場景：NOW獨立版交友房間掛件及活動頁 接入方案：PWA-PLUS-CSR（前端本地渲染）及Aegis測速（無打點測速上報）

接入先後效果對比

由於PWA接入是在NOW交友週年慶活動上線後進行的，採用了逐步接入的方式，以保證不對現網形成異常影響。

活動於9月12日上線，9月29往後下線，期間於9月18日接入Aegis測速，9月20日接入PWA-PLUS靜態資源緩存，9月24日接入PWA-PLUS非直出HTML緩存。

下面是針對不一樣階段的數據對比分析。

首屏耗時

	接入前(ms)	接入後(ms)	提高百分比
僅緩存靜態資源	2600+	2400+	大約8%
完整CSR方案(加上接入HTML緩存)	2600+	2000+	20+%

從測速數據的變化趨勢來看，接入PWA-PLUS方案後，首屏耗時呈減小趨勢，大約提高了20%+(500ms左右)。

靜態資源耗時

	接入前(ms)	接入後(ms)	提高百分比
接入靜態資源緩存	400+	300+	大約25%

附Aegis測速對靜態資源耗時測速數據一覽(活動中間有休賽期，這裏舉一些有效日期的數據)：

日期	請求成功率	平均速度
09-18	99.97%	400ms+
09-20	99.98%	350ms+
09-21	100%	280ms+

經過分析數據，接入了PWA-PLUS方案後對靜態資源耗時有不錯的優化，提高百分比大概是25%。

由於當前Now交友常規活動的掛件和活動頁在一個統一項目下的，因此在加載掛件後，活動頁的靜態資源能夠被緩存。可是後面Now交友活動開始採用多掛件模式，掛件項目會獨立出來，這樣的話，掛件的離線包與活動頁離線包不一樣，作不到提早緩存活動頁資源，但PWA-PLUS的二級頁面緩存方案卻能夠作到，這是優於離線包方案的一個點。

ServiceWorker上報

PWA的覆蓋率也是一個比較關注的問題，對於Now交友房間內H5頁面的場景，統計的ServiceWorker上報數據以下：

	百分比
SW支持率	70%+
SW註冊成功率	90%+
SW命中緩存率	90%+

能夠看到PWA的總體覆蓋率已經比較高了，可以覆蓋大部分的用戶。

PS: 這裏的SW命中緩存率上報的是JS的命中率，HTML緩存命中率須要特殊打點，此次未加上

PWA-PLUS接入心得

PWA-PLUS的接入不是很複雜，具體接入方式能夠參考PWA-PLUS官方文檔（後期會開源）。

本項目採用是PWA-PLUS的CSR方案(前端本地直出渲染方案)，方案的原理在PWA-PLUS分享和官網都有闡述，這裏再也不贅述。

下面分享一下接入心得，供你們參考：

1. 構建改造

pwa-plus-plugin是PWA-PLUS提供的用於爲項目構建出sw.js的webpack插件，其中配置有不少參數，要根據實際項目狀況調整

Now交友常規活動項目的構建配置僞代碼：

2. 數據上報 參考PWA數據上報推薦上報項作的PWA數據上報：

這裏沒有對不一樣操做系統做區分，若是須要分別統計iOS和android的狀況，此處上報代碼應相應調整

3. HTML緩存處理 啓用CSR的緩存方案須要對HTML緩存時機和使用進行特殊處理，這裏的代碼改造以下：

Aegis測速接入心得

爲了驗證接入PWA方案後的優化效果，必定要完善項目的測速上報。

正好Aegis近期作了測速上報相關的功能，並且接入比較簡單，Now交友常規運營活動項目此前也沒有接其餘測速，就果斷嚐鮮採用了Aegis的測速方案。

Aegis測速方案的接入一樣很簡單。

詳細接入方式參考Aegis官方文檔，本項目接入過程以下：

1. package.json依賴最新的Aegis SDK 最新的Aegis SDK提供了無打點測速上報能力

2. 修改Aegis初始化代碼 主要有關注兩個點，一是儘量早的初始化Aegis對象，二是配置啓用測速上報能力

3. 在Aegis管理平臺查看測速數據 在項目上線後，就能夠在Aegis管理平臺查看到相關的測速信息。 3.1. 頁面測速

   

3.2. 接口測速

3.3. 靜態資源測速

從頁面測速、接口測速和靜態資源測速3個維度，基本知足對前端性能監控的訴求，針對不一樣方面，分別進行優化是個很好的思路。好比頁面測速優化能夠採用一些緩存方案(如PWA緩存方案)，接口測速則關注如何提高後臺服務能力，靜態資源測速要考慮是否使用了CDN，CDN的使用是否正確等等。

總結及規劃

總結

1. PWA-PLUS方案有效提高了頁面的加載速度，在本案例中，提高性能大約20%+(500ms左右)。
2. Aegis無打點測速方式大大簡化了頁面測速上報的難度。
3. 運營活動中掛件和活動頁是典型的二級關聯場景，很適合採用二級頁面緩存方案

規劃

1. 完善PWA上報，分別統計iOS和android的數據
2. 在適用的場景啓用二級頁面緩存方案
3. 接入並驗證SSR方案

PWA-PLUS方案爲前端性能優化提供了一個新的選擇，那麼PWA-PLUS方案具體是如何利用PWA能力實現性能優化的呢？請期待下一篇推送，pwa-plus架構篇。

---

關注【IVWEB社區】公衆號獲取每週最新文章，通往人生之巔！