百度外卖移动组件架构与优化

写在前面：

本文内容是饿了么技术沙龙20期：移动技术专场《百度外卖移动组件架构与优化》张朝@百度外卖Android高级开发工程师演讲分享，本文Github链接

分享内容

一、跨平台动态组件方案
二、外卖移动组件架构设计
三、组件业务流程生态
四、组件性能优化实践
五、未来规划

一、跨平台动态组件方案

1.1 三类动态组件方案

Native原⽣生组件：

1、性能、体验非常好
2、开发成本高
3、无法跨平台，传播性差
4、可能的审核风险

Hybrid组件：

1、完全跨平台，易于传播
2、迭代效率非常高
3、性能、体验较差
4、端能力依赖发版

JS驱动原生：

1、性能、体验非常好
2、迭代效率较高
3、学习与开发成本较高
4、稳定性较差

移动组件@百度外卖

二、外卖移动组件架构设计

2.1 早期业务背景与架构

1、主业务与垂类业务同时快速迭代  
2、缺少平台化与模块化的支撑
3、H5垂类业务井喷式发展（各类H5对端能力需求不同，发散不收敛，通信方式不统一，协议混乱）
4、模块耦合严重，新业务无法快速上线

架构变迁—外卖平台化

移动组件—Hybrid框架

2.2 移动组件—通信枢纽

JS -> Native

1、API层最终通过kernel发起通信
2、WMApp.kernel.invoke(action, params, callback)
3、invoke内创建iframe向Native发送消息
4、Android可采用addJSInterface，iOS原生支持，不通用

Native -> JS

1、Native执行WMAppBridge函数，listener需提前注册
2、WMAppBridge.notify(callback,data)
3、WMAppBridge.notifyListener(name, data)

2.3 传统页面加载流程

2.4 移动组件—离线化机制

1、离线包内置Config配置离线页面属性：本地文件相对路径、预加载开关等
2、基于MD5 Check的离线包更新与安装
3、invoke内创建iframe向Native发送消息
4、file://跨域问题，需Bridge提供网络请求能力
5、是否支持多版本管、是否内置默认包，由业务特征决定
6、页面启动由外卖OpenUrl支持，保证灵活性与一致性

2.5 移动组件—本地目录

三、组件业务流程生态

3.1 业务接入与迭代流程

3.2 重要平台搭建

组件发布管理平台、组件性能监控平台、组件异常监控平台

四、组件性能—网络优化

4.1 网络请求预加载

请求预加载
Total Time：T1 + T2 + T3 + T4，串行化
网络请求T3与WebView加载流程较独立，可通过Native前置发起实现并化

请求预加载
Total Time：Max ( T1 + T2, T3 ) + T4，并行化，时长缩减约300ms - 800ms

4.2 预加载配置

1、预定义的请求配置规则，对组件Config扩充request节点（网络请求基本配置：url、method、contentType、data、header等）
2、Native完成动态参数的替换，生成网络请求并发出（常用的动态参数：lat、lng、os、addressId等）
3、业务组件可动态开启/关闭预加载，灵活降级

4.3 网络连接优化

1、组件⽹网络请求由Native发起，更高效率且可掌控
2、基于OkHttp，默认具备Gzip、ConnectionPool等优势
3、基于百度DNS服务的WMHttpDNS，防劫持，更高的稳定性与性能
4、Native级别更细粒度的接口性能与异常监控（APM）
5、低成本的https/http2.0切换

五、组件性能—容器预热

5.1 组件容器预热

组件容器预热

1、Total Time：Max ( T1 + T2, T3 ) + T4，大部分情况下，T1 + T2 > T3 
2、离线化机制已经使T2尽可能降低，T1成瓶颈（Android尤为明显）
3、Android初次创建WebView，开销很大（时长高达500ms - 1000ms）
4、非初次创建，开销会降低（时长约100ms - 500ms）
5、ApplicationContext进行容器预创建，启动后context替换成Activity

组件容器预热

不建议做WebView容器复用，需做DOM清理，避免JS Context污染

六、组件其他优化

6.1 组件I/O优化

1、频繁I/O性能开销较大，降低稳定性
2、JSBridge-Cache，降低注入开销
3、PageConfig-Map，降低I/O次数，快速定位文件位置

6.2 安全性

安全性问题，域名过滤+沙盒目录校验。控制敏感信息读取权限，避免第三方页面隐私泄露，控制File、Content读取权限，避免File域攻击（跨域高危漏洞）

七、未来规划

7.1 离线包体积与实时性

1、采用7zip压缩技术，更高的压缩率
2、对用户流量与成本做更深评估，引入Diff增量包支持
3、在主动拉取包更新的基础上，引入Push实时推包机制

离线包体积与实时性

7.2 性能与安全性

1、更细粒度的页面性能监控
2、更深入的网络优化（性能与成功率）
3、更全面的安全性控制（离线包签名与认证，避免恶意篡改）

## 最后

不知不觉，自己已在前端两年摸爬滚打两年了，讲前端成长，我认为主要在两个方面，一部分是能力，一部分是知识。我个人的观点，能力占百分之八十，知识占百分之二十。联想起鲁迅先生的《朝花夕拾》，于是乎我从今年6月底开始用docsify搭建了几个文档网站在我的github里开始编写《前端笔记系列》(注：有参考[nieyafei]，我把它们分为四类：[【Html/Css/Sass/Less/浏览器/网络】]()、【JavaScript/数据结构/算法】、【Vue/React/Angular/Node】、【微信/小程序】。它们记录分享我眼中的前端相关零碎知识、原理、源码、技巧、面包、前端会议沙龙笔记...目前只编写了【Html/Css/Sass/Less/浏览器/网络】，后面的三节会陆陆续续持续更新...
本文记录在【Html/Css/Sass/Less/浏览器/网络】行业会议里，如果有帮助到你，赏个★star。

百度外卖移动组件架构与优化