mPaaS 客户端问题排查之突如其来的“白屏”等待

简介：mPaaS 客户端问题排查之突如其来的“白屏”等待

移动端的混合架构模式给 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. 分析与排查

根据症状 “