# 小程序技术演进
# 内部开放微信原生能力
此类 API 最初是提供给腾讯内部一些业务使用，很多外部开发者发现了之后，依葫芦画瓢地使用了，逐渐成为微信中网页开发的事实标准。
# JS-SDK 发布
2015 年初，微信发布了一整套网页开发工具包，称之为 JS-SDK，开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个 API。让所有开发者都可以使用到微信的原生能力。
JS-SDK 解决了移动网页使用微信能力不足的问题，通过暴露微信的接口使得 Web 开发者能够拥有更多的能力，然而在更多的能力之外，JS-SDK 的模式并没有解决使用移动网页遇到的体验不良的问题。
# JS-SDK 的不足
用户在访问网页的时候，在浏览器开始显示之前都会有一个白屏的过程，在移动端，受限于设备性能和网络速度，白屏会更加明显。除了白屏，影响 Web 体验的问题还有缺少操作的反馈，主要表现在两个方面：页面切换的生硬和点击的迟滞感。
此外一些开发者会使用 JS-SDK 做一些，比如假红包，伪造的官方活动等。
# 小程序双线程架构
具体实现上小程序采用了类 web + 离线包的形式。开发上与 web 类似，门槛较低，开发效率较高。
离线下载和页面预渲染功能增强了用户体验，提升了加载速度，解决了 JS-SDK 加载白屏的问题 1。
小程序提供了云端更新离线包的功能，可动态更新页面，相对于 app 的更新和发布更为灵活。 此外，小程序在离线包的基础上对切换动画进行优化，降低了切换页面导致的迟滞感，缓解了切换不流畅的问题 2。
小程序在架构方面最大的特点是采用了双线程的开发模式，隔离了 JS 逻辑和 UI 渲染。小程序的渲染层和逻辑层分别由 2 个线程管理：渲染层的界面使用了 WebView 进行渲染，逻辑层采用 JsCore 线程运行 JS 脚本。
逻辑层： 创建一个单独的线程去执行 JavaScript，在这个环境下执行的都是有关小程序业务逻辑的代码； 渲染层： 界面渲染相关的任务全都在 WebView 线程里执行，通过逻辑层代码去控制渲染哪些界面。一个小程序存在多个界面，所以渲染层存在多个 WebView 线程； 通信：这两个线程的通信会经由微信客户端（下文中也会采用 Native 来代指微信客户端）做中转，逻辑层发送网络请求也经由 Native 转发，小程序的通信模型下图所示。
JS 逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的 DOM API 和 BOM API，无法操作页面元素，能达到管控的目的，但也限制了开发者的权限。
这样的逻辑层与 UI 层的隔离，加上小程序的审核和举报机制，使得微信加强对小程序的管控，解决了问题 3。但这也使得开发者无法灵活的进行页面渲染。
# 小程序页面渲染
上面已经说了逻辑层无法操作 DOM 变更，那小程序是如何进行页面的渲染呢？ 小程序基于数据驱动的架构模式，基于 Virtual Dom（React 引入，真实 DOM 的一种 JS 描述方式）的概念，业务侧只需要改变数据即可引起界面变化。 其中渲染层提供了带有数据绑定语法的 WXML，逻辑层提供了 setData 等等 API，开发者需要进行界面变化时，只需要通过在逻辑层执行 setData 把变化的数据通过 Native 层传递到渲染层，小程序会进行 Dom Diff（DOM 结构对比并进行最小化变更的算法）等流程，最后把正确的结果更新在 Dom 树上。
# 小程序与 React Native 对比
那么小程序与现有的混合开发技术类型的异同点在哪？尤其是与 React Native 的区别，小程序技术架构为什么没有使用 React Native?
# 混合开发技术类型
现有的混合开发类型，基于 UI 渲染的分类来看，主要有两类：
- 基于 WebView UI 的基础方案。市面上主流，例如微信 JS-SDK，通过 JSBridge 完成 H5 和 Native 的双向通讯，从而赋予 H5 一定的原生能力。
- 基于 Native UI 的方案，例如 React-Native、Weex、Flutter 等。在赋予 H5 原生 API 能力的基础上，进一步通过 JSBridge 将 JS 解析成虚拟 DOM 传递到 Native，并使用原生渲染。
# React Native 技术架构
TIP
TODO
# 小程序开发注意事项
基于上面的架构分析，我们在开发中需要注意是：
- 避免使用操作操作 DOM 的 npm 包。由于逻辑层和渲染层隔离，逻辑层无法操作 DOM/BOM API，所以需要使用 DOM/BOM API 相关的 npm 包和库中不可使用。
- 避免频繁调用setData。由于setData中的数据不仅需要通过 Native 层传递到渲染层，通过 DOM diff 算法等渲染成最终页面，所以需要尽量减少setData的使用以避免性能问题。
- 避免setData传递大量的新数据。数据的传输会经历跨线程传输和脚本编译的过程，当数据量过大，会增加脚本编译的执行时间，占用 WebView JS 线程，从而影响到最终的渲染性能。