「百度」百度智能小程序框架性能优化实践( 二 ) |HTML|技术|移动互联网|

再下一层是 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. 小程序多宿主运行保障