微信，支付宝小程序实现原理

微信小程序

项目结构

项目结构

上图为微信小程序的项目结构&＃xff0c;pages下面包含了小程序中的每一个页面&＃xff0c;每一个页面由页面结构&＃xff0c;页面样式&＃xff0c;页面配置和逻辑代码四部分组成。

• 页面结构

页面结构文件为index.wxml&＃xff0c;通过微信自定义的标签来写。

• 页面逻辑

页面逻辑通过Javascript来书写。

• 页面样式表

类似CSS文件&＃xff0c;来定义页面内元素的样式。

• 页面配置

页面内的权限等配置信息。

微信小程序的技术选型

小程序的定位特点是轻&＃xff0c;快&＃xff0c;针对这两个特点&＃xff0c;在技术选型上&＃xff0c;微信进行了一些考量。

渲染界面的技术

• 用纯客户端原生技术来渲染

缺点&＃xff1a;无法动态打包&＃xff0c;动态下发。

• 用纯 Web 技术来渲染

缺点&＃xff1a;如果我们用纯 Web 技术来渲染小程序&＃xff0c;在一些有复杂交互的页面上可能会面临一些性能问题&＃xff0c;这是因为在 Web 技术中&＃xff0c;UI渲染跟 Javascript 的脚本执行都在一个单线程中执行&＃xff0c;这就容易导致一些逻辑任务抢占UI渲染的资源。

• 介于客户端原生技术与 Web 技术之间的&＃xff0c;互相结合各自特点的技术来渲染

从渲染底层来看&＃xff0c;PhoneGap与微信 JS-SDK 是类似的&＃xff0c;它们最终都还是使用浏览器内核来渲染界面。而 RN 则不同&＃xff0c;虽然是用 Web 相关技术来编写&＃xff0c;同样是利用了 Javascript 解释执行的特性&＃xff0c;但 RN 在渲染底层是用客户端原生渲染的。我们选择类似于微信 JSSDK 这样的 Hybrid 技术&＃xff0c;即界面主要由成熟的 Web 技术渲染&＃xff0c;辅之以大量的接口提供丰富的客户端原生能力。同时&＃xff0c;每个小程序页面都是用不同的WebView去渲染&＃xff0c;这样可以提供更好的交互体验&＃xff0c;更贴近原生体验&＃xff0c;也避免了单个WebView的任务过于繁重。

微信没有选择RN的原因

1. RN 所支持的样式是 CSS 的子集&＃xff0c;会满足不了 Web 开发者日渐增长的需求&＃xff0c;而对 RN 的改造具有不小的成本和风险。

2. RN 现有能力下还存在的一些不稳定问题&＃xff0c;比如性能、Bug等。RN 是把渲染工作全都交由客户端原生渲染&＃xff0c;实际上一些简单的界面元素使用 Web 技术渲染完全能胜任&＃xff0c;并且非常稳定。

3. RN 存在一些不可预期的因素&＃xff0c;比如之前出现的许可协议问题

原生组件的渲染方式

在安卓则是往 WebView 的 window 对象注入一个原生方法&＃xff0c;最终会封装成 WeiXinJSBridge 这样一个兼容层&＃xff0c;主要提供了调用&＃xff08;invoke&＃xff09;和监听&＃xff08;on&＃xff09;这两种方法。开发者插入一个原生组件&＃xff0c;一般而言&＃xff0c;组件运行的时候被插入到 DOM 树中&＃xff0c;会调用客户端接口&＃xff0c;通知客户端在哪个位置渲染一块原生界面。在后续开发者更新组件属性时&＃xff0c;同样地&＃xff0c;也会调用客户端提供的更新接口来更新原生界面的某些部分。

Web渲染带来的问题与解决

• 提供干净纯粹的Javascript执行环境

由于Javascript的灵活性和浏览器的功能丰富&＃xff0c;会导致很多不可控的隐私&＃xff0c;因此&＃xff0c;微信提供了一个单纯的JS执行环境&＃xff0c;通过对于其中的控件也进行了自定义。因此完全采用这个沙箱环境不能有任何浏览器相关接口&＃xff0c;只提供纯Javascript 的解释执行环境&＃xff0c;那么像HTML5中的ServiceWorker、WebWorker特性就符合这样的条件&＃xff0c;这两者都是启用另一线程来执行 Javascript。但是考虑到小程序是一个多 WebView 的架构&＃xff0c;每一个小程序页面都是不同的WebView 渲染后显示的&＃xff0c;在这个架构下我们不好去用某个WebView中的ServiceWorker去管理所有的小程序页面。得益于客户端系统有Javascript 的解释引擎&＃xff08;在iOS下是用内置的 JavascriptCore框架&＃xff0c;在安卓则是用腾讯x5内核提供的JsCore环境&＃xff09;&＃xff0c;我们可以创建一个单独的线程去执行 Javascript&＃xff0c;在这个环境下执行的都是有关小程序业务逻辑的代码&＃xff0c;也就是我们前面一直提到的逻辑层。而界面渲染相关的任务全都在WebView线程里执行&＃xff0c;通过逻辑层代码去控制渲染哪些界面&＃xff0c;那么这一层当然就是所谓的渲染层。这就是小程序双线程模型的由来。

• 标签自定义

为了防止标签定义带来的一些问题&＃xff0c;微信自定义了一套标签语言&＃xff0c;WXML&＃xff0c;这套标签语言经过编译之后&＃xff0c;最终会生成Html。

渲染与逻辑的分离

上面是小程序的渲染技术的选型&＃xff0c;在选型之后&＃xff0c;由于渲染和逻辑不再同一个浏览器执行&＃xff0c;一个在纯JS环境中&＃xff0c;一个通过WebView渲染&＃xff0c;因此小程序的运行环境分成渲染层和逻辑层&＃xff0c;WXML 模板和 WXSS 样式工作在渲染层&＃xff0c;JS 脚本工作在逻辑层。

小程序的渲染层和逻辑层分别由2个线程管理&＃xff1a;渲染层的界面使用了WebView 进行渲染&＃xff1b;逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面&＃xff0c;所以渲染层存在多个WebView线程&＃xff0c;这两个线程的通信会经由微信客户端做中转&＃xff0c;逻辑层发送网络请求也经由Native转发&＃xff0c;小程序的通信模型如图所示。

逻辑渲染分离

数据驱动视图变化

在开发UI界面过程中&＃xff0c;程序需要维护很多变量状态&＃xff0c;同时要操作对应的UI元素。随着界面越来越复杂&＃xff0c;我们需要维护很多变量状态&＃xff0c;同时要处理很多界面上的交互事件&＃xff0c;整个程序变得越来越复杂。通常界面视图和变量状态是相关联的&＃xff0c;如果有某种“方法”可以让状态和视图绑定在一起&＃xff08;状态变更时&＃xff0c;视图也能自动变更&＃xff09;&＃xff0c;那我们就可以省去手动修改视图的工作。

小程序的逻辑层和渲染层是分开的两个线程。在渲染层&＃xff0c;宿主环境会把WXML转化成对应的JS对象&＃xff0c;在逻辑层发生数据变更的时候&＃xff0c;我们需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层&＃xff0c;再经过对比前后差异&＃xff0c;把差异应用在原来的Dom树上&＃xff0c;渲染出正确的UI界面。

通过setData把msg数据从“Hello World”变成“Goodbye”&＃xff0c;产生的JS对象对应的节点就会发生变化&＃xff0c;此时可以对比前后两个JS对象得到变化的部分&＃xff0c;然后把这个差异应用到原来的Dom树上&＃xff0c;从而达到更新UI的目的&＃xff0c;这就是“数据驱动”的原理。

数据驱动变化

数据驱动变化原理

事件的处理

UI界面的程序需要和用户互动&＃xff0c;例如用户可能会点击你界面上某个按钮&＃xff0c;又或者长按某个区域&＃xff0c;这类反馈应该通知给开发者的逻辑层&＃xff0c;需要将对应的处理状态呈现给用户。由于WebView现在具备的功能只是进行渲染&＃xff0c;因此对于事件的分发处理&＃xff0c;微信进行了特殊的处理&＃xff0c;将所有的事件拦截后&＃xff0c;丢到逻辑层交给Javascript进行处理。

时间拦截与派发

事件的派发处理&＃xff0c;具备事件捕获和冒泡两种机制。通过native传递给JSCore&＃xff0c;通过JS来响应响应的事件之后&＃xff0c;对Dom进行修改&＃xff0c;改动会体现在虚拟Dom上&＃xff0c;然后再进行真实的渲染。

事件冒泡

数据通信

小程序是基于双线程模型&＃xff0c;那就意味着任何数据传递都是线程间的通信&＃xff0c;也就是都会有一定的延时。这不像传统Web那样&＃xff0c;当界面需要更新时&＃xff0c;通过调用更新接口UI就会同步地渲染出来。在小程序架构里&＃xff0c;这一切都会变成异步。

异步会使得各部分的运行时序变得复杂一些。比如在渲染首屏的时候&＃xff0c;逻辑层与渲染层会同时开始初始化工作&＃xff0c;但是渲染层需要有逻辑层的数据才能把界面渲染出来&＃xff0c;如果渲染层初始化工作较快完成&＃xff0c;就要等逻辑层的指令才能进行下一步工作。因此逻辑层与渲染层需要有一定的机制保证时序正确&＃xff0c;

在每个小程序页面的生命周期中&＃xff0c;存在着若干次页面数据通信。逻辑层向视图层发送页面数据&＃xff08;data和setData的内容&＃xff09;&＃xff0c;视图层向逻辑层反馈用户事件。

渲染生命周期

通过Json的方式进行数据的传递&＃xff0c;提高性能的方式就是减少交互的数据量。

缓存机制

小程序宿主环境会管理不同小程序的数据缓存&＃xff0c;不同小程序的本地缓存空间是分开的&＃xff0c;每个小程序的缓存空间上限为10MB&＃xff0c;如果当前缓存已经达到10MB&＃xff0c;再通过wx.setStorage写入缓存会触发fail回调。

小程序的本地缓存不仅仅通过小程序这个维度来隔离空间&＃xff0c;考虑到同一个设备可以登录不同微信用户&＃xff0c;宿主环境还对不同用户的缓存进行了隔离&＃xff0c;避免用户间的数据隐私泄露。

由于本地缓存是存放在当前设备&＃xff0c;用户换设备之后无法从另一个设备读取到当前设备数据&＃xff0c;因此用户的关键信息不建议只存在本地缓存&＃xff0c;应该把数据放到服务器端进行持久化存储。

支付宝小程序

支付宝小程序简介

支付宝小程序的实现和微信小程序的实现方式大致是相同的&＃xff0c;因此这里主要针对两者的差异性的地方。

支付宝小程序目录结构

项目目录结构

支付宝小程序业务架构图

小程序业务架构

在渲染引擎上面&＃xff0c;支付宝小程序不仅提供 Javascript&＃43;Webview 的方式&＃xff0c;还提供 Javascript&＃43;Native 的方式&＃xff0c;在对性能要求较高的场景&＃xff0c;可以选择 Native 的渲染模式&＃xff0c;给用户更好的体验。

运行时架构

小程序编程模型是分为多个页面&＃xff0c;每个页面有自己的 template、CSS 和 JS&＃xff0c;实际在运行的时候&＃xff0c;业务逻辑的 JS 代码是运行在独立的 Javascript 引擎中&＃xff0c;每个页面的 template 和 CSS 是运行在各自独立的 webview 里面&＃xff0c;页面之间是通过函数 navigateTo 进行页面的切换。

每个 webview 里面的页面和公共的 Javascript 引擎里面的逻辑的交互方式是通过消息服务&＃xff0c;页面的一些事件都会通过这个消息通道传给 Javascript 引擎运行环境&＃xff0c;这个运行环境会响应这个事件&＃xff0c;做一些 API 调用&＃xff0c;可调到客户端支付宝小程序提供的一些能力&＃xff0c;处理之后会把这个数据再重新发送给对应的页面渲染容器来处理&＃xff0c;把数据和模板结合在一起来&＃xff0c;在产生最终的用户界面。

小程序运行时

支付宝小程序虚拟机隔离

通常的做法是在 WebView 里面运行 render 的代码&＃xff0c;然后另起一个线程运行 serviceworker&＃xff0c;当 serviceworker 需要更新 dom 的时候把事件和数据通过 messagechannel 发送给 render 线程来执行&＃xff0c;当业务需要传递到 render 层数据量较大&＃xff0c;对象较复杂时&＃xff0c;交互的性能就会比较差&＃xff0c;因此针对这种情况我们提出一个优化的解决方案。

该方案将原始的 JS 虚拟机实例 (即 Isolate) 重新设计成了两个部分&＃xff1a;Global Runtime 和 Local Runtime。

• Global Runtime 部分是存放共享的装置和数据&＃xff0c;全局一个实例。

• Local Runtime 是存放实例自身相关的模块和私有数据&＃xff0c;这些不会被共享。

在新的隔离模型下&＃xff0c;webview 里面的 v8 实例就是一个 Local Runtime&＃xff0c;worker 线程里面的 v8 实例也是一个 Local Runtime&＃xff0c;在 worker 层和 render 层交互时&＃xff0c;setData 对象的会直接创建在 Shared Heap 里面&＃xff0c;因此 render 层的 Local Runtime 可以直接读到该对象&＃xff0c;并且用于 render 层的渲染&＃xff0c;减少了对象的序列化和网络传输&＃xff0c;极大的提升了启动性能和渲染性能。

首屏速度优化

首屏启动流程

由于小程序启动是受到生命周期的控制&＃xff0c;从 onLaunch -> onLoad -> onShow -> onReady -> 用户操作 -> 离开首页这个流程&＃xff0c;在这个过程中的任意一个环节都有可能被客观或者主观的原因打断&＃xff0c;也就有可能导致保存的离线页面不准确&＃xff0c;在启动的时候给用户呈现错误的页面。

所以对于首页离线缓存渲染的效果&＃xff0c;保存页面的时机很重要&＃xff0c;我们提供让开发者可以配置的时机&＃xff0c;配置的时机有两个&＃xff1a;渲染完成和离开首页前。对于渲染完成就是首页渲染完成&＃xff0c;用户还未执行任何的操作前把页面保存下来作为离线缓存的页面。离开首页前就是指用户在首页执行了一系列的操作后&＃xff0c;跳转到其他页面前用户看到的页面保存下来作为离线缓存的页面。

首屏启动流程生命周期

对于闪屏问题发生的场景是因为缓存页面和真实渲染的页面是分离的&＃xff0c;是两个独立的页面&＃xff0c;缓存页面是静态的页面&＃xff0c;真实的页面是通过 js 动态创建的页面&＃xff0c;所以常规的做法就是当真实页面创建完成后替换缓存的页面&＃xff0c;这样的情况下就会发生闪屏。

首页防闪屏直出

针对这个问题&＃xff0c;我们是采用虚拟 dom 来解决&＃xff0c;在加载缓存页面的时候把缓存页面放入初始的虚拟 dom 里面&＃xff0c;真实页面创建后产生的虚拟 dom 跟缓存页面的虚拟 dom 进行 dom diff&＃xff0c;把变化的内容通过 patch 传给浏览器内核&＃xff0c;渲染对应的页面&＃xff0c;这样就可以只更新局部有变化的页面内容&＃xff0c;避免了整个页面的更新&＃xff0c;也保证内容的准确性和实时性。

小程序下载加载流程

支付宝采用UC浏览器内核优势

1.图片内存&＃xff1a;针对低端机&＃xff0c;做了更严格的图片缓存限制&＃xff0c;在保持性能体验的情况下&＃xff0c;进一步限制图片缓存的使用&＃xff1b;多个 webview 共用图片缓存池&＃xff1b;全面支持 webp、apng 这种更节省内存和 size 的图片格式。

2.渲染内存&＃xff1a;Webview 在不可见的状态下&＃xff0c;原生的内存管理没有特殊处理&＃xff0c;UC 内核会将不可见 webview 的渲染内存释放&＃xff1b;渲染内存的合理设置与调优&＃xff0c;避免滚动性能的下降和占用过多内存。

3.JS 内存&＃xff1a;更合理地处理 v8 内存 gc&＃xff0c;在启动时延时执行 full gc&＃xff0c;避免影响启动的耗时。

4.峰值内存管理&＃xff1a;系统在内存紧张时&＃xff0c;会通知内核&＃xff0c;UC 内核能够在系统低内存时释放非关键内存占用的模块&＃xff0c;避免出现 oom&＃xff0c;也避免过度释放带来的渲染黑块&＃xff1b;在部分 oom 的情况&＃xff0c;规避原生内核主动崩溃的逻辑&＃xff0c;在内存极低的情况&＃xff0c;部分功能不可用&＃xff0c;而不是崩溃。

对我们的启示

• 小程序存储管理

增加小程序的存储&＃xff0c;包括内存和磁盘&＃xff0c;可以缓存部分数据&＃xff0c;增加页面直出速度。同时对于磁盘的管理&＃xff0c;按照小程序账号双重维度进行划分。

• 第三方业务接入能力限制

在支持第三方的接入之后&＃xff0c;按照现有方式将会导致对于安全和第三方的行为完全不可控&＃xff0c;可以参考微信&＃xff0c;支付宝方式采用自定义标记语言的方式对标记语言做限制&＃xff0c;并提供纯净的JS环境来进行JS环境的执行&＃xff0c;WebView只负责渲染。

• 首屏速度

参考支付宝方案&＃xff0c;在加载的时候&＃xff0c;现将老的页面呈现给用户&＃xff0c;然后在新页面完成之后&＃xff0c;计算差值&＃xff0c;再进行显示。

• Native绘制结合

Native绘制采用通过JS和Native通信的方式&＃xff0c;将Native控价加入到布局的制定区域。

• 网络请求发送托管

网络请求等全部交由Native托管&＃xff0c;更好的控制网络请求&＃xff0c;监控网络请求。

参考文章

• 支付宝小程序实现

• 微信小程序开发文档

• 微信小程序原理文档