百度智能小程序平台的架构思考与实践 berg

Razor

2019/07/03 发布于 技术 分类

安卓绿色联盟 

文字内容
1. 安 卓 绿 ⾊色 联 盟 技 术 沙 ⻰龙 第 2 7 期 · ⾛走 进 百 度
2. 智能⼩小程序平台 的架构思考与实践
3. 个⼈人介绍 雷雷志兴 - berg • 百度App,主任架构师 • Blog:http://cnberg.com • 微信:53769
4. Agenda • 智能⼩小程序是什什么 • 它是如何运⾏行行的 • 怎样提升整体平台性能 • 如何实现破壳检索 • 智能⼩小程序与开源
5. 智能⼩小程序
6. 总体模块构成 约束 开发 平台 描述 视图、逻辑等 注册/资质 权限、版本 ⼯工具 模拟 客户端能⼒力力、界⾯面等 部署 审核 赋能 模式 交互、设计规范 报表 开源宿主 调试 真机、远程 构建 智能⼩小程序包部署 客户端组件 web组件 搜索、信息流物料料 API 视频、直播、画布等 AI 能⼒力力 web化部署 ⽹网络、媒体、⽂文件、存储、位置等 云端服务 运⾏行行 统计、⼴广告 开源宿主 专属插件能⼒力力 MVVM Framework 运⾏行行 环境 渲染框架(转场动效、导航、交互⾯面板等) ⽣生命周期 运⾏行行沙盒 存储 ⽹网络 消息机制 版本控制
7. 研发⼯工作流 开发者 百度 App 开发 调试 开发者⼯工具 管理理 ⽣生成 上传 云端控制 百度 App 管理理平台 浏览器器 检索
8. 研发⼯工作流 开发者 百度 App 开发 管理理 ⽣生成 上传 云端控制 调试 管理理平台 开发者⼯工具 引擎研发 运⾏行行框架 API 运⾏行行环境 浏览器器 应⽤用研发 引擎发版 集成 源码 开发者⼯工具 管理理平台 发布 客户端 1.0 调试 预览 检索 应⽤用运⾏行行 应⽤用上线 运⾏行行框架 1.0.x 下发 开发者⼯工具 客户端 1.1 模拟 集成测试 百度 App 运⾏行行框架 1.1.x 调试、测试 真机 浏览器器 合适的 ⼩小程序包 对应的运⾏行行框架 加载 线上 最新的 ⼩小程序包
9. 从web到智能⼩小程序 优势 开源 挑战 - 原生页面转场 - 原生组件和API - 一次开发,多平台运行 - 快速接入 劣势 开放 - 首次打开速度 - 通讯成本 - 开发调试复杂 - - 主动分发(信息流) - 可检索(搜索) - 全网流量(开源伙伴) 性能 配套设施极多 保持向后兼容 开发者生态 合作伙伴生态
11. 开发者⼯工具 UI Core ⼯工具栏 UI service 窗⼝口布局 config UI Extensions 模拟器器 UI Extensions Manager 编辑器器 预览/发布 多⽤用户 调试 ⾯面板 真机、远程 - 基于 Electron Configs 本地配置 云端配置 Platforms Node.js + Chromium Projects ⼯工具链 平台⽀支持 ⽂文件类型 ⼩小程序、⼩小游戏 搬家⼯工具、⾃自动化测试 项⽬目模板 表单 编译 编译服务 增量量编译 Launcher 代码⽚片段、运⾏行行向导、通知中⼼心 Main service Core utils ADB CLI 升级器器 菜单 ⽇日志 ⽂文件系统 Events i18n 热更更新 错误处理理 环境变量量 系统信息 - 通用IDE核心 ‣ 核心服务可扩展 ‣ 热更新能力 ‣ 多种平台、多种项目类型 - UI可扩展
12. 智能⼩小程序的多个运⾏行行态
13. 总体运⾏行行时 智能⼩小程序应⽤用 逻辑层 视图层 page A init page B APP … API JS Framework JS Framework WebView / Native-View V8, JSCore Event Data Event Data 框架运⾏行行时 通讯层 JS Bridge 消息管理理 Message Queue APP版本控制 多应⽤用管理理 状态控制 ⻚页⾯面栈 下载、安装、更更新 沙盒、缓存、IPC 冷启、热启 路路由、⽣生命周期 CDN & PMS ⼩小程序包 Request Data 框架包 宿主插件 智能⼩小程序应⽤用 Server 端 安全防护 接⼊入 模板 存储 - 逻辑视图分离 - 数据驱动 - 生命周期控制 基础云服务 消息 登录授权 ⽀支付 封装、调起 组件 API web组件 系统端能⼒力力 Native组件 平台能⼒力力 AI服务 Web-View组件 开放云 AI引擎 语⾳音 图像 - 统一包管理 AR
14. App 运⾏行行态 更更新请求 更更新通知 智能⼩小程序渲染框架 (Native) 实例例创建/复⽤用/销毁 事件通讯 渲染容器器 代码包 百度 App
15. App 运⾏行行态 更更新请求 更更新通知 视图层 智能⼩小程序渲染框架 (Native) 实例例创建/复⽤用/销毁 事件通讯 组件 业务 CSS 端 API (lite) - 只需首次下载 - 预下载,预加载 - 客户端容器 组件渲染框架 JavaScript-Native bridge 渲染容器器 代码包 setData • 运⾏行行沙盒 getData 视图调度框架 业务 JS 端 API 百度 App 逻辑层 • 体验流畅 swan.request - 安全性 - 进一步提升性能
16. Web 运⾏行行态 下载静态资源 视图 创建/复⽤用/销毁 事件通讯 智能⼩小程序渲染框架 (JavaScript) 浏览器器 ⽤用户访问
17. Web 运⾏行行态 下载静态资源 视图 创建/复⽤用/销毁 事件通讯 智能⼩小程序渲染框架 (JavaScript) 浏览器器 ⽤用户访问
18. Web 运⾏行行态 下载静态资源 Web 版组件 业务 CSS 组件 • JS版框架和组件 组件渲染框架 视图 消息通讯 创建/复⽤用/销毁 事件通讯 创建/复⽤用/销毁 事件通讯 视图调度框架 智能⼩小程序渲染框架 (JavaScript) 浏览器器 视图层 业务 JS 消息通讯 逻辑层 Ajax ⽤用户访问 Proxy - 对开发者无感知 - URI 对应 URL - 破壳检索的基础 ‣ ‣ ‣ 抓取、索引 元数据 视觉信号
19. 加载、运⾏行行过程 及性能优化
20. 多进程架构 Max: 6 百度App主进程 智能⼩小程序进程 运⾏行行容器器 JS Framework Message queue JS Bridge Message Slave WebView Master WebView ⻚页⾯面栈管理理 运⾏行行时框架 ⻚页⾯面⽣生命周期 智能⼩小程序框架 Service C/S Binder DeathRecipient 状态同步 调起控制 调起协议 热更更新 包管理理 智能⼩小程序进程管理理 孵化进程 预创建 ⻚页⾯面路路由 进程管理理 与复⽤用 基础组件 ⼩小游戏框架 账号、分享、AI能⼒力力等 进程 初始化 包管理理 运⾏行行容器器构建 WebView / V8 容器器管理理 与通信 lib-process-ipc 调⽤用 功能插件 统计能⼒力力
21. 主从隔离与⻚页⾯面栈 Master Container Slave缓存池 Fragment WebView Slaves master.html app.js Route get <base> 预创建Slave slave.html event V8 Engine Lifecycle event runtime/index.js app.js Message Event page new 预创建Slave & put slave.html
22. 加载与运⾏行行 ⽤用户⼊入⼝口点击 • 调起协议校验 • 前置处理 代码包准备 • 代码包查询 • 代码包下载 • 代码包解压 智能⼩小程序 业务数据 环境创建 驱动渲染 • 创建Native框架 • 初始化数据 • 加载前端框架 • JS加载业务 • 生命周期事件 (initData) • 业务数据 (setData) • 生成DOM节点 内容绘制上屏 • WebView渲染 • Native组件渲染
23. 性能优化⼿手段 • 预创建、预下载 ‣ 进程预创建,WebView容器器预创建与缓存池 ‣ 拆分、预加载前端框架基础库 ‣ 代码包预下载 ‣ JS CodeCache,利利⽤用V8缓存框架代码包和业务代码包 预处理理
24. 性能优化⼿手段 • 预创建、预下载 ‣ 进程预创建,WebView容器器预创建与缓存池 ‣ 拆分、预加载前端框架基础库 ‣ 代码包预下载 ‣ JS CodeCache,利利⽤用V8缓存框架代码包和业务代码包 预处理理 • ⼯工作机制优化 ‣ 进程保活,预加载成功率提升⾄至90% ‣ V8/JSC 替代 WebView ‣ setData优化,跨V8实例例直接传递对象 优化⼯工作机制
25. 性能优化⼿手段 • 预创建、预下载 ‣ 进程预创建,WebView容器器预创建与缓存池 ‣ 拆分、预加载前端框架基础库 ‣ 代码包预下载 ‣ JS CodeCache,利利⽤用V8缓存框架代码包和业务代码包 预处理理 • ⼯工作机制优化 ‣ 进程保活,预加载成功率提升⾄至90% ‣ V8/JSC 替代 WebView ‣ setData优化,跨V8实例例直接传递对象 优化⼯工作机制 • 应⽤用优化 ‣ 加载交互动画优化,渲染⾸首屏同时动画 ‣ 流式解压:下载,解压,计算MD5等操作并⾏行行化 • 业务优化 ‣ 提供性能⾯面板、体验评分,预加载业务请求等,供开发者⾃自⾏行行优化 业务优化
26. 如何实现破壳检索
27. 破壳检索 开发者 智能⼩小程序后台 配置 Sitemap 发版 H5 域名 代码包 URLMapping 解压部署 Web化 百度CDN https://hash($appid).smartapps.cn 破壳检索 开发者后端服务 开发者⼯工作流
28. 破壳检索 开发者 URI 智能⼩小程序后台 配置 Sitemap 发版 智能⼩小程序 Server H5 域名 代码包 静态资源下载 框架runtime ⽤用户逻辑JS URLMapping ⻚页⾯面⻣骨架渲染 解压部署 Web化 百度CDN https://hash($appid).smartapps.cn 破壳检索 开发者 后端服务 开发者后端服务 开发者⼯工作流 破壳检索流程 ⻚页⾯面内容渲染 Data
29. 提⾼高破壳检索效率 点击区域识别 ⽤用户点击 Webview (浏览器器) DOM 智能⼩小程序 渲染框架 Event ⼩小程序响应 - 建议使用 <navigator> - 框架标识可点击区域
30. 提⾼高破壳检索效率 点击区域识别 元数据 ⽤用户点击 Webview (浏览器器) DOM 智能⼩小程序 渲染框架 Event ⼩小程序响应 - 建议使用 <navigator> - 框架标识可点击区域 • ⾃自动挖掘与开发者标注并重 - 子链、出图、特型卡 • 开发者可精确标注⻚页⾯面信息,辅助 搜索引擎和信息流更更准确地理理解⻚页 ⾯面内容 • 调⽤用 setPageInfo() 设置 - 基础信息:标题、摘要、题图 - 互动信息:点赞、评论 Open Graph: <meta property="og:image" content="https://img1.yzkimage.com/ comic/ 11543/1551756626/155175664717545200.jp eg-r0">
31. 提⾼高破壳检索效率 点击区域识别 元数据 ⽤用户点击 Webview (浏览器器) DOM 智能⼩小程序 渲染框架 Event ⼩小程序响应 - 建议使用 <navigator> - 框架标识可点击区域 • ⾃自动挖掘与开发者标注并重 - 子链、出图、特型卡 • 开发者可精确标注⻚页⾯面信息,辅助 搜索引擎和信息流更更准确地理理解⻚页 ⾯面内容 • 调⽤用 setPageInfo() 设置 - 基础信息:标题、摘要、题图 - 互动信息:点赞、评论 调度与排序 • 配置 Web 站域名 • 提供 URL 映射关系 • 推送 Sitemap - 灵活的调度策略 周级、天级、实时 URL mapping: /book/([^\.]+).html => pages/book/index?bookid=${1} &type=history Open Graph: <meta property="og:image" content="https://img1.yzkimage.com/ comic/ 11543/1551756626/155175664717545200.jp eg-r0"> Canonical Tag: <link ref=“smartprogram- alternate” href=“https:// tieba.baidu.com/p/5974634639”>
32. 智能⼩小程序与开源
33. 开源联盟 合作伙伴(宿主) 智能⼩小程序接⼊入平台 接⼊入 开发者 提审 接⼊入 合作伙伴 (宿主) 集成 流量量分发 资质审核 包审核 接⼊入审核 兼容性测试 开发者资源池 发布 宿主APP 双向选择 智能⼩小程序池 宿主资源池 • ⽣生态统⼀一,分发差异化 • -双向选择 开发者:由自身业务选择分发的宿主平台 - 合作伙伴:根据平台特性决定是否分发 统⼀一接⼊入 获得分发权限 •- 简化开发者接入及审核过程 - 统一开发工具及文档 - 保证智能小程序的兼容性
34. 兼容性分级 扩展能⼒力力 基础能⼒力力 ⽹网络库 ⾳音视频播放 地理理位置 下载、解压 图⽚片缓存、浏览 打开⽂文档 分享、扫码 Cookie 授权 OKHTTP/AFN 消息推送 夜间模式 地图、导航 直播、弹幕 AI PaddlePaddle/AR/… 账号能⼒力力 • • • ⽀支付能⼒力力 微信、⽀支付宝 统计能⼒力力 基础能⼒力力,保证业务完整运⾏行行的最⼩小集(必选,可⾃自⾏行行实现) 扩展能⼒力力,属于能⼒力力或性能增强(可选) 兼容性测试,确保宿主APP接⼝口及⾏行行为⼀一致。应⽤用⼀一次开发,多端运⾏行行 安卓浏览内核
35. 扩展智能⼩小程序 标准扩展 宿主实现 ⾮非标准扩展 开源代码 SWAN Framework Extension.js 开发 前端程序模板 JS/CSS/SWAN 标准推荐 SWAN Runtime(Android/iOS) 指导 规范 ⼯工作组讨论 SWAN Porting Layer 标准基础能⼒力力、扩展能⼒力力 标准提案 脚⼿手架 描述⽂文件 宿主私有能⼒力力 开发 端功能模板
36. Summary • 智能⼩小程序相对 Web 突破了了 WebView 限制,暴暴露露了了⼤大量量原⽣生能⼒力力, 从⽽而对平台设计、性能优化、⽣生态构建有更更⾼高要求; • 应⽤用代码运⾏行行于逻辑层,界⾯面展现在视图层;有 App 和 Web 两个运⾏行行态; • 智能⼩小程序有⼤大量量跨进程操作,启动流程⻓长,应⽤用交互复杂, 性能优化⾄至关重要; • 破壳检索等技术能深⼊入理理解智能⼩小程序的内容,让分发精准⾼高效; • 通过兼容性分级机制、扩展机制,能根据合作伙伴的需求,⾼高效地接⼊入智能 ⼩小程序平台,共建开源⽣生态。
37. Thanks Berg 安卓绿⾊色联盟 百度APP技术