簡介：mPaaS 客戶端問題排查之突如其來的“白屏”等待

移動(dòng)端的混合架構(gòu)模式給 App 開發(fā)帶來了嶄新的空間，通過 H5 構(gòu)建的業(yè)務(wù)模塊可以實(shí)現(xiàn)高效快速的版本迭代，滿足多樣化的業(yè)務(wù)需求。為了彌補(bǔ) H5 技術(shù)的部分性能不足，mPaaS 客戶端框架為開發(fā)者提供了“離線”機(jī)制。開發(fā)者在接入 mPaaS H5 容器后，配合 mPaaS 移動(dòng)發(fā)布服務(wù)，可以讓客戶端方便地從本地加載 H5 業(yè)務(wù)包，極大地提升了 H5 應(yīng)用的加載效率。需要注意的是，這套離線機(jī)制的接入過程必須要嚴(yán)格按照文檔來進(jìn)行，一些細(xì)微的錯(cuò)誤可能導(dǎo)致離線機(jī)制失敗，給 H5 應(yīng)用的加載性能帶來影響。這篇文章將和大家分享一例由離線包重構(gòu)引起的“白屏”等待現(xiàn)象的排查和解決。

1. 問題背景

我們（阿里云金融線 SRE 團(tuán)隊(duì)）接到客戶的反饋：開發(fā)者對(duì)所有線上離線包進(jìn)行了一輪的整合和重構(gòu)，發(fā)版后發(fā)現(xiàn) H5 應(yīng)用的加載性能出現(xiàn)較大的退化：在網(wǎng)絡(luò)好的情況下會(huì)有一個(gè)短暫的“白屏”等待時(shí)間，在網(wǎng)絡(luò)較差的情況下，甚至完全無法完成頁面的加載。更詳細(xì)的信息包括：
1) 前一天晚上在生產(chǎn)環(huán)境進(jìn)行離線包版本更新，發(fā)現(xiàn)發(fā)布白名單內(nèi)的用戶訪問離線包出現(xiàn)性能退化
2) iOS 和 Android 雙端均存在這個(gè)問題
3) 白名單內(nèi)共有 20 多個(gè)內(nèi)部用戶，非外部用戶，對(duì)外業(yè)務(wù)沒有實(shí)際影響
4) 非白名單內(nèi)用戶訪問的還是老版本的離線包，沒有出現(xiàn)問題
5) 開發(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ò)較差的情況下，甚至完全無法完成頁面的加載”，我們首先懷疑的是離線包的“離線”機(jī)制失敗了，流量 fallback 到了線上資源。推測“白屏”等待時(shí)間是 Web 資源網(wǎng)絡(luò)下載和加載慢導(dǎo)致的，如下圖所示：

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

和客戶進(jìn)一步溝通確認(rèn)，這部分資源來自于一個(gè)新增的公共資源包。根據(jù) mPaaS H5 容器的接入要求，公共資源包的注冊(cè)需要在容器初始化的時(shí)候手動(dòng)指定，而普通資源包則不需要這樣的操作，可參考文后資料了解詳情[2]，[3]。結(jié)合當(dāng)時(shí)的情況（僅進(jìn)行了離線包的云端重構(gòu)，新增 3 個(gè)全局資源包，客戶端 App 并未重新發(fā)版）推測：這部分 fallback 流量產(chǎn)生原因是客戶端未注冊(cè)新的公共資源包，因此容器不知道這部分資源在本地的映射，只能從網(wǎng)絡(luò) fallback 地址獲取，而這里的核心 JS 資源的加載慢導(dǎo)致了“白屏”等待的性能問題。
根據(jù)上述分析進(jìn)行客戶端代碼檢查，確認(rèn)客戶端確實(shí)沒有對(duì)新增的公共資源包進(jìn)行注冊(cè)。開發(fā)者按照文檔重新對(duì)這個(gè)細(xì)節(jié)進(jìn)行處理，打包測試后確認(rèn)問題消失：不再有 fallback 的請(qǐng)求，“白屏”等待的問題也得到了解決。

3. 小結(jié)

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

參考文檔

[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

我們是阿里云智能全球技術(shù)服務(wù)-SRE團(tuán)隊(duì)，我們致力成為一個(gè)以技術(shù)為基礎(chǔ)、面向服務(wù)、保障業(yè)務(wù)系統(tǒng)高可用的工程師團(tuán)隊(duì)；提供專業(yè)、體系化的SRE服務(wù)，幫助廣大客戶更好地使用云、基于云構(gòu)建更加穩(wěn)定可靠的業(yè)務(wù)系統(tǒng)，提升業(yè)務(wù)穩(wěn)定性。我們期望能夠分享更多幫助企業(yè)客戶上云、用好云，讓客戶云上業(yè)務(wù)運(yùn)行更加穩(wěn)定可靠的技術(shù)。

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

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

總結(jié)

以上是生活随笔為你收集整理的mPaaS 客户端问题排查之突如其来的“白屏”等待的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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