支付宝 App架构的原理与实战

2401_84121588

于 2024-04-07 01:22:15 发布

阅读量879

点赞数 22

分类专栏：程序员文章标签：架构

本文链接：https://blog.csdn.net/2401_84121588/article/details/137443466

版权

程序员专栏收录该内容

196 篇文章

订阅专栏

这里我们暂时将 HTML5 放在第一位，因为做 HTML5 Hybrid 方案，离不开内核优化，内核优化就需要有一定内核研发能力，因此在开发者视角下 HTML5 研发难度最高。如果只是单纯的 HTML5 容器，研发难度就会大幅降低；
其次是 Flutter，目前在实际业务应用案例方面，国内较大体量的 App 暂时只有闲鱼团队引用了 Flutter；同时在 Flutter 的 GitHub 中仍然存在大量的 Open Issues 等待解决。而在实战开发运用过程中，Flutter 的生命周期管理，视图栈管理，原生页面切换等问题都需要开发者在前期选型过程中便要重视；
接下来是 ReactNative/Weex，由于这两个方案开源，且有大量成熟的技术社区支持，方案的研发难度对于开发者而言并不高，同时开源代码方便修改，更容易上手；
最后是原生方案，如果不考虑做热修复的话，原生方案无需做任何改动，直接使用即可；若考虑热修复方案，目前市面也有一些成熟的开源热修复方案可以直接使用。

综上所述，我们再考虑了各方的优劣之后，决定采用“HTML5 容器+内核优化”的方式来应对复杂业务的开发问题。接下来我们就介绍下容器的架构。

1.2 容器架构

最上层是原生的 HTML5 代码，这块就是大家常见的 Web 开发环境，包括 HTML、CSS、JavaScript等。

下面一层即离线包管理，这个我们在第二章节内进行详细介绍。

再往下是 HTML5 容器层，HTML5 容器作为中间层，将浏览器和支付宝底层框架有机结合起来，同时还提供各种生命周期机制、事件机制、扩展插件等内容。

在 HTML5 容器里面有个非常重要的概念： JSBridge。通过 JSBridge，HTML5 容器将支付宝框架底层以及中间件层提供的各种能力和 HTML5 前端代码进行联通，其中包括 RPC（远程过程调用，用来实现 App 和服务器通信）、支付、扫一扫等。

最下面是支付宝底层框架，提供微应用，微服务等概念。一个 HTML5 应用，也会被框架模拟成一个微应用，通过应用 ID 进行解耦。

1.2.1 JSBridge 介绍

JSBridge 是 HTML5 容器的基石，桥接了 JS 环境与 Native，实现了 Native 代码和浏览器环境的双向通信，Native 代码可以通过调用浏览器提供的接口运行JS，从而实现调用 JS 函数、传递参数到 JS 环境等；而浏览器到JS环境的通信是通过 Native 拦截浏览器的请求来实现，请求可以是网络请求或者是一些内部函数的调用。

1.2.2 H5 容器定制化扩展

HTML5 容器提供了 2 种扩展方式：

JSAPI

JSAPI 方式给 HTML5 页面增加了 Native 功能调用接口，通过实现自定义 JSAPI 类中的 Handler 方式，可以以 Native 的形式实现特定功能，例如调用 Native 加密函数。

事件

HTML5 容器在状态变化时会发送事件，通过监听 HTML5 容器特定事件，可以实现对 HTML5 容器生命周期的处理，比如修改加载进度条颜色、修改页面导航栏等。事件提供了更强的定制性，完全可以满足对 HTML5 容器的各种自定义需求

1.3 容器稳定性

上面在研发难度中，我们提及到了，HTML5 方式的研发难度是最高的，因为需要定制化内核进行性能及稳定性优化。目前支付宝采用的是阿里集团的 UC 自研内核，并针对支付宝的 HTML5 容器进行了深度优化和定制。如图所示，UC 内核和系统内核的卡顿卡死率的数据对比效果非常显著，我们可以直观地看到 Webview 稳定性的提升。

离线包机制+发布平台，满足业务即时更新

目前支付宝业务的另外一个特点就是需要快速迭代，变化的政策、突发事件都需要我们可以快速把新的业务需求触达给用户。但是对于 App 开发者有一个不容忽视的问题，就是应用商店审核。由于审核的存在，App 上开发的业务会有一个统一排期，比如说月底会有新版本，那么所有的业务进度都得考虑 App 的排期计划。

2.1 离线包机制

为了做到良好的用户体验，我们在容器中引入了离线包机制。通过离线包机制，我们将原有从线上加载的 HTML5 应用，提前下发到本地，通过读取 IO，或者是内存，进行页面的渲染，达到接近原生的用户体验。

通过发布平台，我们可以将不同的 HTML5 离线包，以单独应用的形式，进行不同维度的下发，使原来 all in 的 Native 发布模式，改为各业务线自行定制发布计划，自行制定发布标准，自行发布的并行发布形式，来满足业务的快速迭代。

2.1.1 加载机制

通过内存提前加载，定时更新，启动预加载内存等手段，我们将一个业务包需要用到的资源加载到内存，从而使启动过程尽量无感知，页面秒开无白屏。同时，我们还有 Fallback 手段，保证在包损坏或者是未下载完成时，可以通过在线页面的形式，保证业务的 100% 可用性。

2.1.2 公共资源包机制

所谓公共资源包，即所有 HTML5 离线包都可能会用到的公共资源的集合。公共资源包解决多个 HTML5 应用使用同一资源产生的冗余问题。如 React 应用使用 ReactJS 框架代码。您可以将公共资源放入全局资源包，以降低 HTML5 应用体积。

通过公共资源包机制，可有效降低各 HTML5 应用的包体积，从而使更新率提高，页面开启速度加快。

2.2 发布平台

为了满足快速迭代的需求，一个强大的发布平台也是必不可少的。发布平台的核心指标，就是将发布内容高效、精准的投放到指定的设备上，为了实现这个目标，我们做了如下的努力。

2.2.1 离线包大小管控及差量包机制

HTML5 容器离线包提供了更新机制，以单个离线包作为更新维度。因为单个离线包业务很简单，所以离线包的大小是可控的，通常小于 500KB。我们通过大量的实践，总结出来“500KB”这个值，既可以满足单个业务的内容，也可以更高效地发布到设备上。500KB，在 4G 的时代，几乎可以做到用户无感知更新，即便是 2G/3G 也可以保证一个高的到达率。

上面说的是一个 HTML5 应用的大小。实际上，我们更新的包会更小，发布平台会通过 diff 算法，计算出相同 HTML5 应用两个不同的版本的差量包，差量包通常也就在几 KB 至几十 KB 不等，可以做到更高的下载成功率，下载成功率一定程度就意味着实际到达率。

2.2.2 Fallback 机制

在一些极端网络场景下，新的业务资源包更新失败，而我们又期望用户使用的是最新的业务，这个时候 Fallback 访问机制就会发挥作用。每个离线包资源都会在发布服平台上存放一份，在刚刚说到的极端场景下，用户会访问服务器的 Fallback 地址获取资源，从而保障页面可用。

2.2.3 多维发布

另外，针对刚开发好的应用，我们可以通过发布平台的灰度发布进行发放，通过外部灰度的形式，对业务指标进行验证，达到标准后，方可正式发布，做到可灰度，可回滚。

更优越的 Hybrid 方案：小程序差异化解析

作为超级 App，一个最主要的特征就是开放。开放就是共享 App 的流量，让外部伙伴的业务可以通过支付宝触达用户，这就面临一个质量管控的问题。支付宝需要保证这些业务是合法合规的，保障用户的财产安全。

3.1 离线包 VS 小程序

如果开发一方业务，离线包肯定是非常好的选择。不过，要是开放给第三方合作伙伴构建生态的话，纯 HTML5 页面就有一些劣势。

上图是 HTML5 离线包和小程序的细节对比。总结来说，对于开放给第三方的生态，从应用体验来讲，小程序更加统一，质量有保障；从应用安全角度来讲，小程序是访问我方发布服务器，不会直接访问第三方链接，安全可控；从研发门槛上来说，小程序是更简单的前端开发方式，同时也提供了非常丰富的组件。

3.2 小程序解析

小程序其实和离线包本质是类似的，都是一种 Hybrid 应用，但小程序是基于一个定制的 DSL 语言，不是前端的标准，但是类似。在 DSL 规则下业务进行小程序的开发，不支持直接操作 DOM，这种 DSL 规则下的自由可以有效的进行质量管控。

小程序作为一个应用，他拥有完整的生命周期。从开发到关闭，开发者都可以感受到，这点也是 HTML5 所不具备的。另外，每个小程序之间从运行时和持久化上，都是完全隔离的，而且小程序运行在特定进程中，所以和支付宝也是隔离开的。

在渲染性能上，小程序采用双线程模式将页面渲染和业务逻辑分别放在两个单独的线程中，renderer 运行在 WebView 中，负责渲染界面；小程序业务逻辑运行在单独的 worker 线程，负责事件处理、API 调用和生命周期管理。两个线程之间通过 postMessage 以及 onMessage 进行数据交换，数据可以从 worker 线程传递到 render 重新渲染界面，同时 renderer 也可以将事件传递给对应的 worker 处理。一个 worker 可以对应多个 renderer，方便页面间数据共享和交互。

在资源加载方面，小程序采用离线化方式加载，也就是说当打开小程序时，小程序离线包必须下载到本地，由于每个版本只下载一次，一方面节省了每次请求的资源开销，另一方面启动速度大大提升了。当有新的版本时，发布平台自动比对本地安装的版本和最新版本产生并下发差量包，客户端不需要下载整个包即可更新小程序至最新版。