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

移动互联网中 Native App（NA）和 H5 一直处在博弈状态，在性能体验和灵活性上艰难寻找着平衡，单从技术上来说，小程序就是 NA 和 H5 的又一次碰撞。小程序的灵活性已被证实，在性能方面，百度智能小程序从框架启动、小程序包下载、小程序包加载以及渲染等 4 个方面进行了启动速度优化。
在 GMTC 全球大前端技术大会（深圳站）2019 上，百度技术经理付嘉兴结合百度侧和小程序开发者侧阐释了提升自身小程序性能可采用的手段，并介绍了作为宿主如何将小程序框架与自身技术整合。本文即根据付嘉兴的演讲整理而成。
以下为正文：
今天给大家讲的题目是《百度开源小程序框架架构演进和性能优化实践》。本次分享包含两部分，第一部分是百度智能小程序整体的框架及演进，主要讲百度小程序开发全流程概况、百度智能小程序框架，以及百度小程序多宿主运行保障；第二部分是百度小程序框架的性能优化，主要讲整个小程序的启动过程，以及从开发者角度，有哪些重要的优化点。
百度智能小程序整体框架及演进整个移动互联网一直是在 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 可运行程序；客户端端能力的封装暴露。
- 上一页
- 1
- 2
- 3
- 4
- 5
- 6
- 下一页