簡(jiǎn)介：一起由離線包重構(gòu)引起的“白屏”等待現(xiàn)象的排查和解決案例

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

移動(dòng)端的混合架構(gòu)模式給 App 開(kāi)發(fā)帶來(lái)了嶄新的空間，通過(guò) H5 構(gòu)建的業(yè)務(wù)模塊可以實(shí)現(xiàn)高效快速的版本迭代，滿足多樣化的業(yè)務(wù)需求。為了彌補(bǔ) H5 技術(shù)的部分性能不足，mPaaS 客戶端框架為開(kāi)發(fā)者提供了“離線”機(jī)制。

開(kāi)發(fā)者在接入 mPaaS H5 容器后，配合 mPaaS 移動(dòng)發(fā)布服務(wù)，可以讓客戶端方便地從本地加載 H5 業(yè)務(wù)包，極大地提升了 H5 應(yīng)用的加載效率。需要注意的是，這套離線機(jī)制的接入過(guò)程必須要嚴(yán)格按照文檔來(lái)進(jìn)行，一些細(xì)微的錯(cuò)誤可能導(dǎo)致離線機(jī)制失敗，給 H5 應(yīng)用的加載性能帶來(lái)影響。

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

1. 問(wèn)題背景

我們（阿里云金融線 SRE 團(tuán)隊(duì)）接到客戶的反饋：開(kāi)發(fā)者對(duì)所有線上離線包進(jìn)行了一輪的整合和重構(gòu)，發(fā)版后發(fā)現(xiàn) H5 應(yīng)用的加載性能出現(xiàn)較大的退化：在網(wǎng)絡(luò)好的情況下會(huì)有一個(gè)短暫的“白屏”等待時(shí)間，在網(wǎng)絡(luò)較差的情況下，甚至完全無(wú)法完成頁(yè)面的加載。更詳細(xì)的信息包括：

1) 前一天晚上在生產(chǎn)環(huán)境進(jìn)行離線包版本更新，發(fā)現(xiàn)發(fā)布白名單內(nèi)的用戶訪問(wèn)離線包出現(xiàn)性能退化

2) iOS 和 Android 雙端均存在這個(gè)問(wèn)題

3) 白名單內(nèi)共有 20 多個(gè)內(nèi)部用戶，非外部用戶，對(duì)外業(yè)務(wù)沒(méi)有實(shí)際影響

4) 非白名單內(nèi)用戶訪問(wèn)的還是老版本的離線包，沒(méi)有出現(xiàn)問(wèn)題

5) 開(kāi)發(fā)側(cè)的變更內(nèi)容包括：

a) 全量離線包更新，更新數(shù)量大概是60個(gè)左右

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

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

2. 分析與排查

根據(jù)癥狀 “網(wǎng)絡(luò)好的情況下會(huì)有一個(gè)短暫的“白屏”等待時(shí)間，網(wǎng)絡(luò)較差的情況下，甚至完全無(wú)法完成頁(yè)面的加載”，我們首先懷疑的是離線包的“離線”機(jī)制失敗了，流量 fallback 到了線上資源。推測(cè)“白屏”等待時(shí)間是 Web 資源網(wǎng)絡(luò)下載和加載慢導(dǎo)致的，如下圖所示：

要驗(yàn)證這個(gè)推測(cè)，我們需要通過(guò)抓取 HTTP 層面的報(bào)文來(lái)確認(rèn)這個(gè)問(wèn)題，抓包方法可參考文后資料了解詳情^[1]。從網(wǎng)絡(luò)包中我們觀察到，每次打開(kāi) H5 應(yīng)用，均存在不同程度的資源文件拉取行為，這些 Web 資源大的有幾十 MB，通過(guò)網(wǎng)絡(luò)加載速度較慢，如下圖所示：

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

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

根據(jù)上述分析進(jìn)行客戶端代碼檢查，確認(rèn)客戶端確實(shí)沒(méi)有對(duì)新增的公共資源包進(jìn)行注冊(cè)。開(kāi)發(fā)者按照文檔重新對(duì)這個(gè)細(xì)節(jié)進(jìn)行處理，打包測(cè)試后確認(rèn)問(wèn)題消失：不再有 fallback 的請(qǐng)求，“白屏”等待的問(wèn)題也得到了解決。

3. 小結(jié)

開(kāi)發(fā)者在 mPaaS H5 容器在接入和使用上需要對(duì)一些細(xì)節(jié)投入特別的關(guān)注，比如離線包的驗(yàn)簽和全局包的使用等。因?yàn)?H5 容器存在 fallback 機(jī)制，所以即使“離線”失敗，容器也是可以“正?！奔虞d業(yè)務(wù)包的內(nèi)容的，開(kāi)發(fā)階段開(kāi)發(fā)者往往容易忽略掉“離線”對(duì)性能層面的影響。建議開(kāi)發(fā)者在聯(lián)調(diào)和上線的過(guò)程中，對(duì)于離線機(jī)制的工作情況予以檢查和確認(rèn)，可以通過(guò)抓包的手段從外部確認(rèn)沒(méi)有額外的、非必要的 fallback 請(qǐng)求產(chǎn)生，最終的目的是發(fā)揮離線包的性能優(yōu)勢(shì)。

參考文檔

[1]如何抓取 HTTP 報(bào)文（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技術(shù)期刊》

《阿里云SRE技術(shù)期刊》2021年02月刊重磅發(fā)布啦，囊括了事件要聞、應(yīng)用說(shuō)明、最佳實(shí)踐、測(cè)試環(huán)境搭建、問(wèn)題排查等眾多技術(shù)干貨，感興趣的小伙伴速來(lái)圍觀~~

關(guān)注公眾號(hào)「mPaaS」回復(fù)“SRE期刊”立即下載原文

-END-

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

版權(quán)聲明：本文內(nèi)容由阿里云實(shí)名注冊(cè)用戶自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，阿里云開(kāi)發(fā)者社區(qū)不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。具體規(guī)則請(qǐng)查看《阿里云開(kāi)發(fā)者社區(qū)用戶服務(wù)協(xié)議》和《阿里云開(kāi)發(fā)者社區(qū)知識(shí)產(chǎn)權(quán)保護(hù)指引》。如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容，填寫(xiě)侵權(quán)投訴表單進(jìn)行舉報(bào)，一經(jīng)查實(shí)，本社區(qū)將立刻刪除涉嫌侵權(quán)內(nèi)容。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。