小程序的运行机制

现在大多数前端开发人员都需要写小程序，而且还需要对小程序进行优化，所以我们必须要懂得一些小程序的运行机制。这篇文章我们就来介绍一下吧。

什么是小程序

小程序页面本质上还是网页，使用的技术栈与网页开发基本一致，都用到HTML、CSS和JS。

小程序和网页的区别：

1. 运行环境不同：小程序需要在微信等应用内部运行，而网页需要在浏览器中运行
2. 交互方式不同：小程序使用的是原生的用户交互方式，例如滑动、长按、摇一摇等，而网页则使用鼠标、键盘等传统的交互方式。
3. 访问权限不同：小程序可以访问一些系统资源和设备功能，例如摄像头、地理位置、蓝牙等，而网页则需要通过插件或浏览器 API 进行访问，且访问权限相对有限。
4. 离线能力不同：小程序可以支持离线使用，用户可以在无网络的情况下继续使用已经访问过的小程序，而网页则需要依赖网络才能访问
5. 页面切换方式不同：小程序采用了双线程模式，可以实现页面间的快速切换和流畅的动画效果，而网页则需要重新加载网页或者使用AJAX等技术进行局部刷新。

总的来说，小程序更加轻量化、易于使用、交互方式更加自然，而网页则更加适合展示信息、提供网页服务等。小程序和网页各有其适用场景，开发者需要根据具体需求选择合适的技术方案。

原生微信小程序框架

技术选型

渲染界面的技术方案大概有三种

1. 用纯客户端原生技术渲染
2. 用纯Web技术渲染
3. 用客户端原生技术与Web技术结合的混合技术（Hybrid）渲染

方案对比：

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

方案如何确定：

1. 小程序的宿主环境是微信等手机APP，用纯客户端原生技术来编写小程序，那么小程序代码每次都需要与手机APP代码一起发布---不可取
2. Web支持有一份副本资源包放在云端，通过下载到本地，动态执行后即可渲染出界面，但是纯Web技术在一些复杂的交互上可能会面临着一些性能问题 ---不可取
   • 在Web技术中，UI渲染跟脚本执行都在一个单线程中执行，这就容易导致一些逻辑任务抢占UI渲染的资源。
3. 两者结合起来的Hybrid技术来渲染小程序，用一种近似Web的方式来开发，并且可以实现在线更新代码 ---可取
   • 扩展Web的能力。比如向输入框组件等有更好的控制键盘的能力
   • 体验更好，同时也减轻WebView的渲染工作
   • 用客户端原生渲染内置一些复杂组件，可以提供更好的性能

双线程模式

小程序的双线程模式是指小程序运行时使用了两个线程

• 渲染层线程，负责渲染页面
• 逻辑层线程，负责处理小程序的逻辑

具体来说，当小程序启动时，微信客户端会为小程序创建两个线程：一个是渲染层线程（也称为 Webview 线程），它运行在一个独立的进程中，负责渲染小程序的界面，处理用户的交互操作，并将渲染结果显示在屏幕上；另一个是逻辑层线程（JSCore线程），它运行在微信客户端进程中，负责处理小程序的逻辑，例如网络请求、数据处理、事件处理等。

这两个线程之间通过微信客户端提供的底层通信机制进行通信，渲染层线程和逻辑层线程之间的通信是通过微信客户端提供的 WebViewJavascriptBridge 接口实现的。具体来说，当渲染层线程需要执行一些逻辑时，例如发起网络请求，它会通过 WebViewJavascriptBridge 接口将请求发送给逻辑层线程，逻辑层线程处理完请求后，再将结果通过同样的方式返回给渲染层线程，渲染层线程再根据结果进行渲染。

这种双线程模式可以有效地将界面和逻辑分离，提高小程序的运行效率和安全性。同时，这种模式也提供了一种比传统 Web 应用更加接近原生应用的开发方式，使得小程序可以更加方便地访问底层设备和系统功能，例如摄像头、地理位置、推送通知等。如下图

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

小程序双线程模型：

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

数据驱动视图变化

数据驱动视图是指将数据与视图绑定起来，当数据发生变化时，视图自动更新的一种机制。在小程序中，数据驱动视图是通过数据绑定和事件绑定来实现的。

数据绑定

DOM 的更新通过简单的数据通信来实现 逻辑层和视图层的通信会由 Native （微信客户端）做中转，逻辑层发送网络请求也经由 Native 转发。

JS 对象模拟 DOM 树 -> 比较两棵虚拟 DOM 树的差异 -> 把差异应用到真正的 DOM 树上。

1. 数据监听：小程序会在页面渲染时，将页面上所有需要进行数据绑定的节点都收集起来，并为每个节点创建一个监听器。
2. 数据更新：当某个数据发生变化时，小程序会调用数据更新函数，通过这个函数通知所有相关的监听器，让它们知道数据已经发生了变化。
3. 视图更新：监听器收到数据更新通知后，会将新的数据值设置到对应的节点上，从而更新视图。如果数据更新时需要进行复杂的计算或者数据处理，监听器也会进行相应的处理，然后更新视图。
4. 批量更新：为了提高性能，小程序会将多个数据更新合并成一个批量更新操作，然后一次性更新所有需要更新的节点

小程序的数据绑定更新原理是通过监听数据变化，然后更新对应的视图节点。在更新过程中，小程序会尽可能地进行批量处理，以提高性能和效率。同时，小程序还提供了一些优化技巧，如使用 setData 函数更新数据时，可以通过传入对象的方式，将多个数据更新操作合并成一个批量操作，进一步提高了性能

事件绑定

视图层需要进行交互，这类反馈应该通知给开发者的逻辑层，需要将对应的处理状态呈现给用户。

视图层的功能只是进行渲染，因此对于事件的分发处理，微信进行了特殊的处理，将所有的事件拦截后，丢到逻辑层交给JS处理。

1. 事件监听：当小程序页面渲染完成后，会为页面上的每个需要绑定事件的节点添加一个监听器，以便监听事件的发生。
2. 事件触发：当用户在页面上进行操作时，例如点击、滑动等，就会触发相应的事件。
3. 事件分发：当事件发生后，小程序会将事件分发到相应的监听器中。在分发过程中，小程序会进行一些事件的冒泡和捕获处理，以确定最终要响应事件的节点和监听器。
4. 事件处理：当事件分发到监听器后，监听器会调用相应的事件处理函数，处理事件相关的逻辑。在事件处理函数中，开发者可以读取事件相关的数据，例如触发事件的节点、事件类型等，然后进行相应的处理。事件处理函数中也可以更新数据、触发视图更新等操作

小程序的事件绑定原理是通过为页面节点添加监听器，监听用户操作并分发事件，然后调用相应的事件处理函数来处理事件相关的逻辑。在事件处理函数中，开发者可以进行各种操作，例如读取数据、更新数据、触发视图更新、调用其他函数等，以实现各种功能。同时，小程序还提供了一些优化技巧，例如通过事件委托，将事件监听绑定在父节点上，从而避免为每个子节点都添加监听器，提高了性能。

参考：

• 浅谈小程序运行机制
• 微信开发文档