快捷搜索:  汽车  科技

饿了么免单活动8月18:饿了么双十一 PHA 会场实践

饿了么免单活动8月18:饿了么双十一 PHA 会场实践会场页面的首屏接口耗时较长,部分甚至达2s以上,为了缩短页面加载耗时,对首屏接口进行预请求。考虑到饿了么端之前已通过TSchedule支持了接口预请求的能力和包大小问题,因此决定不引入pha的prefetch模块,而是借助饿了么现有能力对pha进行data prefetch的适配化改造。2业务接口预加载优化前后链路对比:下面具体展示预热效果(左侧为未开启预热,右侧为开启预热状态):效果视频请点击查看:饿了么双十一 PHA 会场实践

饿了么端特色性能优化

1PHA webview预热

打开pha首屏页面和切换tab时需要执行容器创建和主文档加载,有较长时间的白屏,体验不佳。预渲染页面无疑是性能效果最佳手段,但一方面会造成资源浪费,另一方面也会带来很大的内存压力,不能随意滥用,后续若能和端智能更好结合或许才能更好的发挥它的价值。

饿了么端对首屏外的tab采用了预热方案(预热页面最大个数可配置),来消除tab切换时的白屏时间。预热和预渲染的不同点为:预热在离屏阶段拿到主文档后不发起首屏接口请求。在首屏页面渲染完成后,将剩下的底部和顶部item对应的webview都预热并缓存好,当用户点击对应tab时再消费webview进行上屏操作,具体实现复用pha/preload子模块链路并进行了一些改造,参考了TSchedule的预渲染逻辑。主要流程如下图所示:

饿了么免单活动8月18:饿了么双十一 PHA 会场实践(1)

优化前后链路对比:

饿了么免单活动8月18:饿了么双十一 PHA 会场实践(2)

饿了么免单活动8月18:饿了么双十一 PHA 会场实践(3)

下面具体展示预热效果(左侧为未开启预热,右侧为开启预热状态):

效果视频请点击查看:饿了么双十一 PHA 会场实践

2业务接口预加载

会场页面的首屏接口耗时较长,部分甚至达2s以上,为了缩短页面加载耗时,对首屏接口进行预请求。考虑到饿了么端之前已通过TSchedule支持了接口预请求的能力和包大小问题,因此决定不引入pha的prefetch模块,而是借助饿了么现有能力对pha进行data prefetch的适配化改造。

由客户端同学提前发布orange(开关配置发布平台)预请求配置,pha会场在首屏路由、底部tab切换、顶部pageheader切换时提前触发接口预请求,也提供jsapi供前端自行调用预请求,优化效果明显,目前已经是饿了么端会场业务必备优化项。

饿了么免单活动8月18:饿了么双十一 PHA 会场实践(4)

(1)、首屏webview加载前网络数据异步预请求

饿了么免单活动8月18:饿了么双十一 PHA 会场实践(5)

猜您喜欢: