——This article is selected from the February 2021 issue of "Alibaba Cloud SRE Technical Journal"
The hybrid architecture model of the mobile terminal has brought a brand new space for App development. The business modules built through H5 can achieve efficient and rapid version iteration to meet diversified business needs. In order to make up for some of the performance deficiencies of H5 technology, the mPaaS client framework provides developers with an "offline" mechanism.
After the developers access the mPaaS H5 container and cooperate with the mPaaS mobile publishing service, the client can easily load the H5 business package locally, which greatly improves the loading efficiency of the H5 application. It should be noted that the access process of this offline mechanism must be carried out strictly in accordance with the document. Some subtle errors may cause the offline mechanism to fail and affect the loading performance of the H5 application.
This article will share with you a case of troubleshooting and solving the "white screen" waiting phenomenon caused by offline package reconstruction.
1. Problem background
We (Alibaba Cloud Financial Line SRE team) received feedback from customers: The developer carried out a round of integration and refactoring of all online and offline packages. After the release, it was found that the loading performance of the H5 application was greatly degraded: In a good situation, there will be a short "white screen" waiting time, and in a poor network situation, the page loading cannot even be completed at all. More detailed information includes:
1) The offline package version update was performed in the production environment the night before, and it was found that users in the release whitelist had performance degradation when accessing the offline package
2) Both iOS and Android have this problem
3) There are more than 20 internal users in the whitelist, non-external users, and no actual impact on external business
4) Users who are not in the whitelist access the old version of the offline package, and there is no problem
5) The changes on the development side include:
a) Full offline package update, the number of updates is about 60
b) The structure of the old offline package is 1 common resource package + N common resource packages
c) The architecture of the new offline package is 3 public resource packages + N common resource packages
2. Analysis and investigation
According to the symptom "There will be a short "white screen" waiting time when the network is good, and the page loading cannot be completed at all when the network is poor. The first thing we suspect is that the "offline" mechanism of the offline package has failed. , The traffic fallsback to online resources. It is speculated that the "white screen" waiting time is caused by the slow download and loading of the Web resources network, as shown in the following figure:
要验证这个推测，我们需要通过抓取 HTTP 层面的报文来确认这个问题，抓包方法可参考文后资料了解详情[1]。从网络包中我们观察到，每次打开 H5 应用，均存在不同程度的资源文件拉取行为，这些 Web 资源大的有几十 MB，通过网络加载速度较慢，如下图所示：
和客户进一步沟通确认，这部分资源来自于一个新增的公共资源包。根据 mPaaS H5 容器的接入要求，公共资源包的注册需要在容器初始化的时候手动指定，而普通资源包则不需要这样的操作，可参考文后资料了解详情[2]，[3]。
结合当时的情况（仅进行了离线包的云端重构，新增 3 个全局资源包，客户端 App 并未重新发版）推测：这部分 fallback 流量产生原因是客户端未注册新的公共资源包，因此容器不知道这部分资源在本地的映射，只能从网络 fallback 地址获取，而这里的核心 JS 资源的加载慢导致了“白屏”等待的性能问题。
根据上述分析进行客户端代码检查，确认客户端确实没有对新增的公共资源包进行注册。开发者按照文档重新对这个细节进行处理，打包测试后确认问题消失：不再有 fallback 的请求，“白屏”等待的问题也得到了解决。
3. 小结
开发者在 mPaaS H5 容器在接入和使用上需要对一些细节投入特别的关注，比如离线包的验签和全局包的使用等。因为 H5 容器存在 fallback 机制，所以即使“离线”失败，容器也是可以“正常”加载业务包的内容的，开发阶段开发者往往容易忽略掉“离线”对性能层面的影响。建议开发者在联调和上线的过程中，对于离线机制的工作情况予以检查和确认，可以通过抓包的手段从外部确认没有额外的、非必要的 fallback 请求产生，最终的目的是发挥离线包的性能优势。
参考文档
[1] How to capture HTTP messages (Mac OS/Charles): https://help.aliyun.com/document_detail/159161.html
[2]Android management offline package: https://help.aliyun.com/document_detail/112553.html
[3] iOS management offline package: https://help.aliyun.com/document_detail/112928.html
"Alibaba Cloud SRE Technical Journal"
The February 2021 issue of "Alibaba Cloud SRE Technical Journal" has been released. It includes event news, application notes, best practices, test environment construction, troubleshooting and many other technical dry goods. Interested partners come to watch~~
The public account "mPaaS" replied to "SRE Journal" Download the original text now
-END-
