Johnny's blog

运行机制

一、技术选型

一般来说，渲染界面的技术有三种：

  • 用纯客户端原生技术来渲染
  • 用纯 Web 技术来渲染
  • 用客户端原生技术与 Web 技术结合的混合技术（简称 Hybrid 技术）来渲染

通过以下几个方面分析，小程序采用哪种技术方案

  • 开发门槛：Web 门槛低，Native 也有像 RN 这样的框架支持
  • 体验：Native 体验比 Web 要好太多，Hybrid 在一定程度上比 Web 接近原生体验
  • 版本更新：Web 支持在线更新，Native 则需要打包到微信一起审核发布
  • 管控和安全：Web 可跳转或是改变页面内容，存在一些不可控因素和安全风险

最终采用了两者结合起来的Hybrid 技术来渲染小程序，可以用一种近似web的方式来开发，并且可以实现在线更新代码，同时引入组件也有以下好处：

  • 扩展 Web 的能力。比如像输入框组件（input, textarea）有更好地控制键盘的能力
  • 体验更好，同时也减轻 WebView 的渲染工作
  • 绕过 setData、数据通信和重渲染流程，使渲染性能更好
  • 用客户端原生渲染内置一些复杂组件，可以提供更好的性能

JSBridge 的用途

JSBridge 简单来讲，主要是 给 JavaScript 提供调用 Native 功能的接口，让混合开发中的『前端部分』可以方便地使用地址位置、摄像头甚至支付等 Native 功能。

JSBridge 的实现原理

JavaScript 是运行在一个单独的 JS Context 中（例如，WebView 的 Webkit 引擎、JSCore）。由于这些 Context 与原生运行环境的天然隔离，我们可以将这种情况与 RPC（Remote Procedure Call，远程过程调用）通信进行类比，将 Native 与 JavaScript 的每次互相调用看做一次 RPC 调用。

JavaScript 调用 Native

1.注入API:通过 WebView 提供的接口，向 JavaScript 的 Context（window）中注入对象或者方法，让 JavaScript 调用时，直接执行相应的 Native 代码逻辑，达到 JavaScript 调用 Native 的目的。

2.拦截 URL SCHEME:Web 端通过某种方式（例如 iframe.src）发送 URL Scheme 请求，之后 Native 拦截到请求并根据 URL SCHEME（包括所带的参数）进行相关操作。

URL SCHEME是一种类似于url的链接，是为了方便app直接互相调用设计的，形式和普通的 url 近似，主要区别是 protocol 和 host 一般是自定义的

Native 调用 JavaScript

Native 调用 JavaScript，其实就是执行拼接 JavaScript 字符串，从外部调用 JavaScript 中的方法，因此 JavaScript 的方法必须在全局的 window 上。

编译文件

小程序编译后的结果会有两个bundle，index.js封装的是小程序项目的 view 层，以及 index.worker.js 封装的是项目的业务逻辑，在运行时，会有两条线程来分别处理这两个bundle，一个是主渲染线程，它负责加载并渲染 index.js 里的内容，另外一个是 Service Worker线程，它负责执行 index.worker.js 里封装的业务逻辑，这里面会有很多对底层api调用。

二、双线程模型

管控和安全：阻止开发者使用一些，例如浏览器的window对象，跳转页面、操作DOM、动态执行脚本的开放性接口。

视图层的界面使用了 WebView 进行渲染，逻辑层采用 JsCore 线程运行 JS脚本。

  • 逻辑层：创建一个单独的线程去执行 JavaScript，在这里执行的都是有关小程序业务逻辑的代码，负责逻辑处理、数据请求、接口调用等
  • 视图层：界面渲染相关的任务全都在 WebView 线程里执行，通过逻辑层代码去控制渲染哪些界面。一个小程序存在多个界面，所以视图层存在多个 WebView 线程
  • JSBridge 起到架起上层开发与Native（系统层）的桥梁，使得小程序可通过API使用原生的功能，且部分组件为原生组件实现，从而有良好体验

三、双线程通信

逻辑层和试图层的通信会由 Native （微信客户端）做中转，逻辑层发送网络请求也经由 Native 转发。

这也就是说，我们可以把 DOM 的更新通过简单的数据通信来实现。

1. 在渲染层把 WXML 转化成对应的 JS 对象。

2. 在逻辑层发生数据变更的时候，通过宿主环境提供的 setData 方法把数据从逻辑层传递到 Native，再转发到渲染层。

3. 经过对比前后差异，把差异应用在原来的 DOM 树上，更新界面。

四、运行机制

  • 小程序没有重启的概念
  • 当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁
  • 当短时间内（5s）连续收到两次以上收到系统内存告警，会进行小程序的销毁

五、性能优化

主要的优化策略可以归纳为三点：

  • 精简代码，降低WXML结构和JS代码的复杂性；
  • 合理使用setData调用，减少setData次数和数据量；
  • 必要时使用分包优化。

setData：即用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 JS 脚本，再通过执行 JS 脚本的形式传递到两边独立环境。