《本文选自2021年2月《阿里云SRE技术期刊》移动端的混合架构模式给App开发带来了新的空间，通过H5搭建的业务模块可以实现高效快速的版本迭代，满足多样化的业务需求。为了弥补H5技术的一些性能不足，mPaaS客户端框架为开发者提供了“离线”机制。开发者接入mPaaSH5容器，配合mPaaS移动发布服务后，客户端可以方便地在本地加载H5业务包，大大提高了H5应用的加载效率。需要注意的是，这种离线机制的接入过程必须严格按照文档进行。一些小错误可能会导致离线机制失效，从而影响H5应用的加载性能。本文将与大家分享离线包重构导致“白屏”等待现象的排查及解决方法。一、问题背景我们（阿里云金融线SRE团队）收到客户反馈：开发者对所有线上线下包进行了一轮整合重构，发现H5应用加载性能出现问题发布后大大减少。劣化：在网络好的情况下，会出现短暂的“白屏”等待时间，在网络不好的情况下，甚至根本无法加载页面。更详细的信息包括：1）前一天晚上在生产环境更新了离线包版本，发现发布白名单中的用户在访问离线包时出现性能下降。2）iOS和Android端均存在该问题。20多个内部用户，非外部用户，对外部业务没有实际影响4）非白名单用户仍然访问老版本的离线包，没有问题5）开发端的变化包括：a)全离线包更新，更新个数约60b)旧离线包结构为1个公共资源包+N个公共资源包c)新离线包结构为3个公共资源包+N个公共资源包packages2.分析排查根据“网络好的时候会出现短暂的‘白屏’等待时间，网络差的时候甚至根本无法加载页面”的现象，我们首先怀疑的是即离线包的“离线”机制失效，流量回退到在线资源。推测“白屏”等待时间是由于网页资源下载加载缓慢造成的，如下图所示：为了验证这个推测，我们需要通过HTTP层面的抓包来确认这个问题。抓包方法请参考帖子。有关详细信息[1]的信息。从网络包中，我们观察到每次打开H5应用，都会不同程度的拉取资源文件。这些网页资源大到几十MB，通过网络加载速度慢，如下图：沟通确认这部分资源来自一个新的公共资源包。根据mPaaSH5容器的接入需求，公共资源包的注册需要在容器初始化的时候手动指定，而公共资源包不需要这样的操作。详情请参考资料[2]、[3]。结合当时的情况（只对离线包进行了云重构，新增了3个全局资源包，没有重新发布客户端App），推测这部分fallback的原因traffic是客户端没有注册新的公共资源包，所以容器不知道这些资源在本地的映射，只能从网络回退地址获取，这里导致核心JS资源加载缓慢“白屏”等待的性能问题。根据以上分析查看客户端代码，确认客户端没有注册新增的公共资源包。开发者根据文档重新处理了这个细节，经过打包测试确认问题消失：不再有回退请求，“白屏”等待的问题也已经解决。3.总结开发者在接入和使用mPaaSH5容器时需要特别注意一些细节，比如离线包的校验，全局包的使用等。因为H5容器有回退机制，即使“下线”失败，容器也能“正常”加载业务包的内容。在开发阶段，开发者往往会忽略“离线”对性能层面的影响。建议开发者在联调上线过程中检查确认下线机制的工作状态。他们可以通过捕获数据包从外部确认没有生成额外和不必要的回退请求。最终目的是充分利用离线包。性能优势。参考文档[1]如何抓取HTTP包（MacOS/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年2月刊已出，包括活动花絮、申请说明、最近的好物实践、测试环境搭建、故障排除等诸多技术干货，有兴趣的朋友快来围观吧~~关注公众号「mPaaS」回复“SREJournal”立即下载原文-END-
