【百度官方技术分享】百度智能小程序框架性能优化实践

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

整个移动互联网一直是在 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-js ，开发者直接和这层打交道。swan-js 负责两件事情：即 swan 代码转为 HTML，变成 WebView 可运行程序；客户端端能力的封装暴露。

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

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