导读:今天分享的文章是来自百度智能小程序研发部的实战总结:《百度开源小程序框架架构演进和性能优化实践》。分享包含两部分,第一部分是百度智能小程序整体的框架及演进,主要讲百度小程序开发全流程概况、百度智能小程序框架,以及百度小程序多宿主运行保障;第二部分是百度小程序框架的性能优化,主要讲整个小程序的启动过程,以及从开发者角度,有哪些重要的优化点。

 

一、百度智能程序整体框架及演进

 

整个移动互联网一直是在 NA 和 H5 之间寻找权衡,NA 的性能好、能力强;H5 灵活性更高。我认为渲染分为两派,一派就是 NA 渲染派,一派叫做 H5 渲染派。

NA 渲染派,比较有代表性的如 RN 、 Flutter ;Web 渲染派,比如百度的轻应用,以及之后做的小程序。

 

1. 开发全流程概览

图片

百度曾经做过的 Web 渲染派的三个代表产品,分别是轻应用、直达号和小程序。

  • 轻应用,是 H5 + 端能力。它是一个标准的 H5,增加了一些 NA 的 API,比如定位等。

  • 直达号,在技术层面跟轻应用是一样的。

  • 小程序,本质上是一个受限的 H5 + 大量丰富的 API + UI 组件。现在我们给小程序提供的 API 有 300 多个,组件有 30 多个,组件是有界面的。比如,视频、地图 。

为什么小程序要受限,主要有两个原因:

  • 保持体验的一致性。H5 太过灵活,JS 随时可以去改变界面。

  • 安全考虑。因为我们提供了大量 API 和组件,且这些都是很底层的一些能力,比如电话号码、账号,肯定不能轻易开放给大家。

怎么受限,主要有两点:

  • 编写语言,不再是直接写 HTML ,而是用自定义语言 swan 来编写 。

  • runtime 层有两个栈,一个是渲染栈,一个是 JS 执行栈,这两个栈从物理上隔离,以保障安全性。

     

2. 智能小程序框架

(1)开发运行全流程

图片

先简单介绍一下整个百度智能小程序的开发流程。

  • 首先开发者用 swan 写布局;

  • 接着通过开发者工具打包,上传到我们的小程序 B 端服务器;

  • 然后是小程序的审核流程,有机审、人审;

  • 最后是用户点击小程序时,客户端请求小程序 C 端服务器,C 端服务器再从 B 端服务器获取小程序包。整个过程都是加密传输,可以保证代码的安全。

(2)百度智能小程序框架 -SWAN

图片

上图是一个百度智能小程序的框架,我们内部命名为SWAN

分层结构如下:

  • 最上层是开发者基础库,命名为 swan-js ,开发者直接和这层打交道。swan-js 负责两件事情:即 swan 代码转为 HTML,变成 WebView 可运行程序;客户端端能力的封装暴露。

  • 再下一层是 swan-native。这里面最核心的是API 和组件的 NA 实现。其中双栈管理也在这一层,另外标红的 Extension 用于开发者宿主自身能力扩展使用,比如,贴吧宿主期望增加个发帖能力,就可以通过此机制。

  • 再下面这层叫 Porting Layer。这层是百度小程序为了实现开源,增加的一层与宿主的接口层。最下面这一层是宿主基础能力层。如果宿主没有这些能力,可以参考百度开源的参考实现,可直接集成到宿主使用。

 

3. 核心结构

(1)前端角度

 

图片

我们从前端的视角来看看双栈结构。一个宿主客户端可以运行多个小程序,并且在一段时间内保持存活状态,每个小程序都有一个 master 执行框架 JS 和小程序开发者的 JS,一个 master 对应多个 slave(slave 代表一个用户可见的界面)。

(2)客户端角度

图片

从客户端角度来看双栈结构,如上图所示,master 负责执行 JS,可以有两种实现方式,WebView 或 JS 引擎(V8/jscore),JS 引擎的效率更高;slave 的展现有 WebView,为了加快 WebView 的创建速度,设置 cache;master 和 slave 的通信通过消息总线。

master 不支持 BOM、DOM 和 WEB-API,小程序只能调用对外开放的能力。

(3)小程序 NA 组件与界面关系

 

图片

从体验上看,小程序的体验要好于 H5,其中有一点就是小程序会把一些 NA 的能力和 UI 融合到小程序里面去。小程序的主体渲染还是基于 H5 技术,接下来我们讲一下 NA 元素如何融入 UI 界面。

NA 元素与 H5 的关系有两种,贴片关系、同层关系。

贴片关系:NA 元素在 H5 不在同一层,NA 浮在 H5 之上,H5 所有元素都不可以放到 NA 元素之上。因为不在一层,就需要处理滚动联动,当检测到 WebView 滚动 n 个像素, NA 元素也需要滚动 n 个像素。

同层关系:NA 元素在 H5 这一层,H5 的原生可以压在 NA 元素之上。

图片

贴片、同层的界面层级树如上。

 

图片

我们举一个视频组件同层的例子。视频组件比较复杂,有 4 层。第 1 层是视频层,即原始视频的图像,第 2 层是弹幕层,第 3 层是用于视频控制的控件层(比如,开始、暂停按键),第 4 层 Slot 层,视频上面漂的 H5 元素将被放到这层。

同层处理机制,先在 H5(开发者写的 swan 会被转为 H5) 上打一个特殊的标记先占位,属性 inline;浏览内核把这个区域的 surface 拿出来给到 NA 层;然后,小程序框架会把这个区域 surface 塞给播放器,让播放器直接在 surface 上面绘制,达到同层。上面的弹幕、控件、 Slot ,都是 swanjs 层 H5 实现 ,Slot 层可以认为是一个容器,例如写一个 video,其所有的子元素都会放在 Slot。

NA 的组件同层的技术方案还不太一样,安卓和 iOS 也是有些区别的。像在 iOS 上,如果有些组件设置 over-flow ,它会天然支持这一套东西,但是安卓就需要浏览器内核来支持。

 

4. 小程序多宿主运行保障

 

图片

百度智能小程序是开放系统,可以运行在多宿主之上,那如何在多宿主上保证小程序运行体验的一致性呢?

各个宿主集成了我们的小程序框架后,首先要跑 CTS 测试,通过之后才可以拿到小程序列表进行分发。

对于可选能力部分,各个宿主不是所有的能力都需要实现。比如,一些 AI 能力、push 能力。

如果一个小程序用到了可选能力怎么办?

两个办法,一是小程序和宿主之间的双向选择机制,小程序可以选择我要分发到哪些平台,宿主也有权利选择要分发到哪些宿主。二是,小程序做兼容。

 

Estension 机制

图片

上图所示,标红的是Extension 机制,当宿主有一些定制化的要求时,可以使用此机制。作为宿主,需要做两件事情,一是在 JS 层需要写一套接口;二是在 Porting Layer 接口实现层实现一套能力。如果宿主觉得这个能力是通用的,可以反馈提案,审核通过后,百度小程序团队会将提案合并到开源框架里。

 

5. 章节小结

 

图片

更多精彩内容欢迎关注百度开发者中心公众号。

 

百度智能小程序框架性能优化实践(上)(图12)