前言

最近实习中参加了H5我的项目向小程序迁徙的工作，在微信官网文档和一些帖子上学习了小程序运行机制和底层原理，以及与Web页面的区别，在此基础上又看了一些对于小程序同构计划的内容。以下是我集体的一些学习总结。本文内容参考
微信凋谢文档
如何了解小程序的运行机制
小程序多平台同构计划

小程序是什么？

在小程序诞生前，微信团队开发的JS-SDK使web开发者能够通过裸露的API应用微信原生能力去实现一些事，如调用接口打开微信领取等。针对挪动端设施网络状态不稳固导致的白屏问题，微信又推出增强版JS-SDK，也就是“微信 Web 资源离线存储”，但在简单的页面上仍然会呈现白屏的问题，起因体现在页面切换的僵硬和点击的通畅感。这个时候须要一个JS-SDK解决不了的，使用户体验更好的一个零碎，即小程序。

小程序是一种全新的连贯用户与服务的形式，它能够在微信内被便捷地获取和流传，同时具备杰出的应用体验。

其本质是运行在webview上的H5利用，但与H5又有着实质上的不同。H5能够了解为运行在挪动端的web页面，实质还是由HTML+CSS+JS形成的web利用。小程序和H5的区别也就是小程序和网页的区别。

小程序与一般网页开发的区别

小程序的次要开发语言是 JavaScript ，小程序的开发同一般的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁徙到小程序的开发成本并不高，然而二者还是有些许区别的。

  • 网页开发的渲染和脚本执行是在同一个线程上执行的，这也是网页脚本长时间运行有可能会导致页面失去响应的起因；而小程序的视图层和逻辑层是齐全拆散在两个不同的线程上执行
  • 开发网页时咱们能够在JS代码中通过Dom API对节点进行各种操作，通过window对象实现原生事件响应、页面跳转；因为小程序的JS代码运行在JSCore,与渲染层拆散，所以在逻辑层中无奈取得Dom和Bom，从而无奈应用各种Dom API
  • 网页开发者须要面对的环境是各式各样的浏览器，PC 端须要面对 IE、Chrome、QQ浏览器等，在挪动端须要面对Safari、Chrome以及 iOS、Android 零碎中的各式 WebView 。而小程序开发过程中须要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具

小程序架构

渲染机制

处于性能和实现的思考，小程序采纳Hybrid渲染机制，这样做有几点益处：

  • 扩大 Web 的能力。比方像输入框组件（input, textarea）有更好地管制键盘的能力
  • 体验更好，同时也加重 WebView 的渲染工作
  • 绕过 setData、数据通信和重渲染流程，使渲染性能更好
  • 用客户端原生渲染内置一些简单组件，能够提供更好的性能

架构

如下图所示，原生小程序框架采纳双线程模型：视图层和逻辑层齐全拆散为两个不同的线程。每个页面的渲染在一个webview线程上执行，视图层蕴含多个webview线程，而逻辑层则对立在JSCore上执行。

这样做的目标是避免逻辑层对Dom和window的操作（如跳转到内部页面），使整个利用变得平安可控。

  • 逻辑层：创立一个独自的线程去执行 JavaScript，在这里执行的都是无关小程序业务逻辑的代码，负责逻辑解决、数据申请、接口调用等
  • 视图层：界面渲染相干的工作全都在 WebView 线程里执行，通过逻辑层代码去管制渲染哪些界面。一个小程序存在多个界面，所以视图层存在多个 WebView 线程
  • JSBridge 起到架起下层开发与Native（微信零碎）的桥梁，使得小程序可通过API应用原生的性能，且局部组件为原生组件实现，从而有良好体验

视图层和逻辑层的通信

双线程模型下，逻辑层代码无奈间接操作Dom，逻辑层和视图层的数据传输（setData）是通过两边的evaluateJavaScript实现的。用户传输的数据，须要将其转换为字符串模式传递，同时把转换后的数据内容拼接成一份 JS 脚本，再通过执行 JS 脚本的模式传递到两边独立环境。

小程序多端同构计划

很多企业都有本人的小程序平台，如微信、支付宝、头条等，现在市面上很多产品都是基于React、Vue等框架开发的web利用，但web端代码是不可能运行在小程序平台上的（详见上述小程序和web利用的不同），而开发几套代码的工夫和保护老本又太高，为了节俭学习和开发成本，各大公司都推出了本人的多端小程序计划，使开发者能够用React、Vue框架来开发小程序。相似框架有微信的Kbone、阿里的Remax、京东的Taro等。

Taro是在编译时将代码适配到小程序平台，而Kbone和Remax则是在运行时实现这个工作。

以下重点解释Kbone和Remax。

Kbone

参照微信官网文档，Kbone在适配层里模拟出了浏览器环境，让 Web 端的代码能够不做什么改变便可运行在小程序里。

kbone实现原理是在worker线程适配了一套JS Dom API，下层不论是哪种前端框架(react、vue)或原生JS最终都须要调用JS Dom API操作 dom，适配的 JS Dom API则接管了所有的Dom操作，并在内存中保护了一棵Dom tree，所有下层最终调用的Dom操作都会更新到这棵Dom tree中，每次操作(有节流)后会把Dom tree同步到webview线程中，通过wxml自定义组件进行 render。

Remax

与Kbone下层反对多种框架（React、Vue、Angular）不同，Remax专门实现React利用向小程序的适配。

Remax实现原理是在worker线程保护一棵虚构Dom tree,这棵虚构Dom tree会通过小程序原生的setData办法映射到render线程，render层再把虚构Dom tree进行遍历而后渲染。

Remax和kbone相似，都是在 worker 线程保护一棵Dom tree，再把这棵 Dom tree传到render线程进行渲染，惟一的区别是remax dom tree发生变化时，会计算差别，而不须要把整棵树都传到render线程，此性能是react提供的，就是在 diff 完后找出差别，则把差别传到render线程

总结

  • Kbone和Remax实现原理基本相同，都在worker线程保护虚构Dom tree,再把虚构Dom tree传到render线程渲染
  • 二者次要有两点不同：Kbone下层反对多种框架，而Remax仅反对React；Remax的Dom tree发生变化时会计算diff，把diff映射到render线程，而Kbone是将整个Dom tree传过来