饿了么免单活动8月18：饿了么双十一 PHA 会场实践
饿了么免单活动8月18：饿了么双十一 PHA 会场实践PHA框架渲染前的任何一步出错可能导致框架初始化失败，为实现同一个链接投放到饿了么新老版本，并保证业务在各种异常场景下可用，需做到无缝降级到H5容器，流程如下：降级在worker获取经纬度后，会使用页面id、资源id和经纬度发起一个接口请求，获取完整manifest所需数据（pages、tab等），数据返回后拼接成完整manifest数据，然后调用jsapi通知端上更新manifest，进行tab和页面的加载，此接口耗时大概200ms左右。通过在路由阶段预请求此接口来进行优化，由于接口所需的页面id和资源id针对同一大促会场投放期间基本不会改变，因此提前发布的预加载配置将这两个id直接设为固定值，而经纬度在预请求发起时动态获取。此功能上线之后经过两个版本的对比，首屏耗时整体减少约150ms。
方式二：在入口链接处传入经纬度（针对无需pha worker的场景）
大多单页面业务在一开始就能获取到完整的manifest数据，不需要worker进行额外处理，也就无法直接通过方式一获得注入的经纬度信息，因此我们采用了另一个方案，给pha入口链接（manifest url）拼接经纬度参数，并通过pha参数透传的能力将其拼接到H5内页的链接上。具体流程如下：
完整manifest数据接口预请求
在worker获取经纬度后，会使用页面id、资源id和经纬度发起一个接口请求，获取完整manifest所需数据（pages、tab等），数据返回后拼接成完整manifest数据，然后调用jsapi通知端上更新manifest，进行tab和页面的加载，此接口耗时大概200ms左右。
通过在路由阶段预请求此接口来进行优化，由于接口所需的页面id和资源id针对同一大促会场投放期间基本不会改变，因此提前发布的预加载配置将这两个id直接设为固定值，而经纬度在预请求发起时动态获取。
此功能上线之后经过两个版本的对比，首屏耗时整体减少约150ms。
稳定性降级
PHA框架渲染前的任何一步出错可能导致框架初始化失败，为实现同一个链接投放到饿了么新老版本，并保证业务在各种异常场景下可用，需做到无缝降级到H5容器，流程如下：
预案
在整个双十一大促开始前，针对pha会场可能出现的各种异常情况进行了预案的录入和演练，例如：会场降级，预热关闭、接口预加载关闭、manifest预取关闭等，在安全团队和测试团队同学的共同支持保障下，pha容器会场在大促期间运行稳定，未出现任何重大故障。
监控和报表
在dp2监控平台构建了manifest命中率监控、离线资源命中率监控、降级监控、性能监控、预热命中率监控、首屏耗时监控、容器内webview加载耗时监控、白屏监控等相关报表。
此外手淘目前在建设容器大盘，ios端已经初步进行了接入，期待大盘后续例如告警，二方业务数据展示等建设。
通过pha框架的接入及一系列的优化手段，双端优化首屏耗时减少650ms左右，消除了切换tab时的白屏时间，提升了饿了么端大促会场的用户体验，同时也促进了业务数据的提升。
据运营侧数据统计，去年双十一主会场底部导航Tab的曝光点击率，相比国庆大促正式期提升超过50%。自618大促正式期试点PHA以来，新底部导航点击率持续上升。
后续前端需解决拼链接的问题作为常态化的产品能力支持各业务场景使用，端侧也将进一步探索其他的优化方案，比如: Tabbar直出渲染、pha容器Fragment化、quickjs引入等。此外除会场业务，饿了么端超会部分业务也进行了pha投放，取得了一些性能上的收益。
期望未来饿了么所做的优化点能给大家一些启发与思考，服务更多合适业务，进一步提升用户体验。
关注【阿里巴巴移动技术】微信公众号，每周 3 篇移动技术实践&干货给你思考！
