简介：今天分享的文章是百度智能小程序研发部实战总结：《百度开源小程序框架架构演进与性能优化实践》。分享由两部分组成。第一部分为百度智能小程序整体框架及演进，主要讲百度小程序开发全流程概览、百度智能小程序框架、百度多主机运行保障；第二部分是百度的小程序框架的性能优化主要讲了整个小程序的启动过程以及从开发者的角度来看有哪些重要的优化点。

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

整个移动互联网一直在寻找NA和H5之间的取舍。 NA性能好，能力强； H5更灵活。我觉得渲染分为两个流派，一个是NA渲染流派，一个叫H5渲染流派。

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

1. 开发过程概述

百度曾经做过的网页渲染学派的三个代表产品是轻应用、直接账号和小程序。小程序被限制主要有两个原因：如何被限制，主要有两点：2.智能小程序框架

(1）开发运营全过程

我们简单介绍一下整个百度智能小程序的开发过程。

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

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

层次结构如下：

3.核心结构

(1）正面角度

我们从前端的角度来看一下双栈结构。主机客户端可以运行多个小程序并让它们在一段时间内保持活动状态。每个小程序都有一个执行框架JS和小程序开发的JS的master，一个master对应多个slave（slave代表一个用户可见的界面）。

(2）客户视角

从客户端来看，双栈结构如上图所示。 master负责执行JS。有两种实现方式百度小程序开发，WebView或者JS引擎（V8/jscore）。 JS引擎效率更高；从显示有WebView，为了加快WebView的创建，设置缓存；主从之间通过消息总线进行通信。

master不支持BOM、DOM和WEB-API，小程序只能调用对外开放的能力。 (3）Applet NA组件与接口关系

从体验上来看，小程序的体验要好于H5，其中之一就是小程序会在小程序中集成一些NA能力和UI。小程序的主要渲染还是基于H5技术。接下来我们来说说NA元素是如何融入UI界面的。

NA元素与H5的关系有两种，patch关系和同层关系。补丁关系：H5中NA元素不在同一层，NA浮动在H5之上，H5的所有元素不能放在NA元素之上。因为不在第一层，所以需要处理滚动联动。当检测到WebView滚动n个像素时，NA元素也需要滚动n个像素。同层关系：NA元素在H5层百度小程序开发，H5的native可以压在NA元素上面。

patch和同一层的接口层次树如上。

让我们以同一层上的视频组件为例。视频组件更复杂，有 4 层。第一层是视频层，即原始视频的图像，第二层是弹幕层，第三层是视频控制的控制层（例如开始和暂停按钮），第四层layer 是 slot 层，它浮动在视频上。 H5元素将被放置到这一层中。

同层处理机制 百度小程序开发 ，先在H5上打一个特殊的标记（开发者写的swan会转成H5），属性内联；浏览内核取出这个区域的surface for Go to the NA层；然后小程序框架会将这个区域的surface塞给播放器，让播放器可以直接在surface上绘制到达同一层，上面的弹幕、控件、插槽都是swanjs层实现的H5、slot layer 可以认为是一个容器，比如写视频的时候，它的所有子元素都会放在Slot里面，同层NA组件的技术方案是不一样的，和Android和iOS还是有一些区别的支付宝小程序开发，像在iOS上，如果某些组件Set over-flow，自然会支持这套东西，但是Android需要浏览器内核来支持。

4.小程序多主机运营保障

百度智能小程序是一个开放系统，可以在多主机上运行，​​那么如何保证小程序在多主机上运行体验的一致性呢？

每台主机集成我们的小程序框架后，必须先运行CTS测试，然后获取小程序列表进行分发。对于可选能力，并不是每台主机的所有能力都需要实现。比如一些AI能力和推送能力。如果小程序使用可选功能怎么办？有两种方法。一是小程序和主机之间的双向选择机制。小程序可以选择我要分发到哪些平台，主机有权选择分发到哪些主机。二、小程序兼容。

拉伸机制

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

5.章节总结

在明天的文章中百度小程序开发，我将深入介绍百度小程序框架的性能优化，主要是关于整个小程序的启动过程，以及从开发者的角度来看有哪些重要的优化点。希望能给大家带来启发。

【昱远信息系统开发定制】