导读：今天分享的文章是来自百度智能小程序研发部的实战总结：《百度开源小程序框架架构演进和性能优化实践》。分享包含两部分，第一部分是百度智能小程序总体的框架及演进，主要讲百度小程序开发全流程概况、百度智能小程序框架，以及百度小程序多宿主运行保障；第二部分是百度小程序框架的性能优化，主要讲整个小程序的启动过程，以及从开发者角度，有哪些重要的优化点。前端
1、百度智能程序总体框架及演进
整个移动互联网一直是在 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 来编写 。ide
-
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. 章节小结
更多精彩内容欢迎关注百度开发者中心公众号。