簡介：一起由離線包重構引起的“白屏”等待現象的排查和解決案例

——本文選自《阿里云SRE技術期刊》2021年02月刊

移動端的混合架構模式給 App 開發帶來了嶄新的空間，通過 H5 構建的業務模塊可以實現高效快速的版本迭代，滿足多樣化的業務需求。為了彌補 H5 技術的部分性能不足，mPaaS 客戶端框架為開發者提供了“離線”機制。

開發者在接入 mPaaS H5 容器后，配合 mPaaS 移動發布服務，可以讓客戶端方便地從本地加載 H5 業務包，極大地提升了 H5 應用的加載效率。需要注意的是，這套離線機制的接入過程必須要嚴格按照文檔來進行，一些細微的錯誤可能導致離線機制失敗，給 H5 應用的加載性能帶來影響。

這篇文章將和大家分享一起由離線包重構引起的“白屏”等待現象的排查和解決案例。

1. 問題背景

我們（阿里云金融線 SRE 團隊）接到客戶的反饋：開發者對所有線上離線包進行了一輪的整合和重構，發版后發現 H5 應用的加載性能出現較大的退化：在網絡好的情況下會有一個短暫的“白屏”等待時間，在網絡較差的情況下，甚至完全無法完成頁面的加載。更詳細的信息包括：

1) 前一天晚上在生產環境進行離線包版本更新，發現發布白名單內的用戶訪問離線包出現性能退化

2) iOS 和 Android 雙端均存在這個問題

3) 白名單內共有 20 多個內部用戶，非外部用戶，對外業務沒有實際影響

4) 非白名單內用戶訪問的還是老版本的離線包，沒有出現問題

5) 開發側的變更內容包括：

a) 全量離線包更新，更新數量大概是60個左右

b) 舊離線包的架構是 1 個公共資源包 + N 個普通資源包

c) 新離線包的架構是 3 個公共資源包 + N 個普通資源包

2. 分析與排查

根據癥狀 “網絡好的情況下會有一個短暫的“白屏”等待時間，網絡較差的情況下，甚至完全無法完成頁面的加載”，我們首先懷疑的是離線包的“離線”機制失敗了，流量 fallback 到了線上資源。推測“白屏”等待時間是 Web 資源網絡下載和加載慢導致的，如下圖所示：

要驗證這個推測，我們需要通過抓取 HTTP 層面的報文來確認這個問題，抓包方法可參考文后資料了解詳情^[1]。從網絡包中我們觀察到，每次打開 H5 應用，均存在不同程度的資源文件拉取行為，這些 Web 資源大的有幾十 MB，通過網絡加載速度較慢，如下圖所示：

和客戶進一步溝通確認，這部分資源來自于一個新增的公共資源包。根據 mPaaS H5 容器的接入要求，公共資源包的注冊需要在容器初始化的時候手動指定，而普通資源包則不需要這樣的操作，可參考文后資料了解詳情^[2]，[3]。

結合當時的情況（僅進行了離線包的云端重構，新增 3 個全局資源包，客戶端 App 并未重新發版）推測：這部分 fallback 流量產生原因是客戶端未注冊新的公共資源包，因此容器不知道這部分資源在本地的映射，只能從網絡 fallback 地址獲取，而這里的核心 JS 資源的加載慢導致了“白屏”等待的性能問題。

根據上述分析進行客戶端代碼檢查，確認客戶端確實沒有對新增的公共資源包進行注冊。開發者按照文檔重新對這個細節進行處理，打包測試后確認問題消失：不再有 fallback 的請求，“白屏”等待的問題也得到了解決。

3. 小結

開發者在 mPaaS H5 容器在接入和使用上需要對一些細節投入特別的關注，比如離線包的驗簽和全局包的使用等。因為 H5 容器存在 fallback 機制，所以即使“離線”失敗，容器也是可以“正常”加載業務包的內容的，開發階段開發者往往容易忽略掉“離線”對性能層面的影響。建議開發者在聯調和上線的過程中，對于離線機制的工作情況予以檢查和確認，可以通過抓包的手段從外部確認沒有額外的、非必要的 fallback 請求產生，最終的目的是發揮離線包的性能優勢。

參考文檔

[1]如何抓取 HTTP 報文（Mac OS/Charles）：https://help.aliyun.com/document_detail/159161.html

[2]Android管理離線包：https://help.aliyun.com/document_detail/112553.html

[3]iOS管理離線包：https://help.aliyun.com/document_detail/112928.html

---

《阿里云SRE技術期刊》

《阿里云SRE技術期刊》2021年02月刊重磅發布啦，囊括了事件要聞、應用說明、最佳實踐、測試環境搭建、問題排查等眾多技術干貨，感興趣的小伙伴速來圍觀~~

關注公眾號「mPaaS」回復“SRE期刊”立即下載原文

-END-

原文鏈接：https://developer.aliyun.com/article/782920?

版權聲明：本文內容由阿里云實名注冊用戶自發貢獻，版權歸原作者所有，阿里云開發者社區不擁有其著作權，亦不承擔相應法律責任。具體規則請查看《阿里云開發者社區用戶服務協議》和《阿里云開發者社區知識產權保護指引》。如果您發現本社區中有涉嫌抄襲的內容，填寫侵權投訴表單進行舉報，一經查實，本社區將立刻刪除涉嫌侵權內容。

總結

以上是生活随笔為你收集整理的客户端突如其来的“白屏”等待该如何解决？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。