微信小程序底层原理

微信小程序底层原理主要基于其独特的双线程模型和一系列优化策略，以确保在移动端上提供接近原生应用的性能和用户体验。下面介绍一下小程序底层原理的一些大概：

1. 双线程模型
   • 逻辑层与视图层的分离：小程序采用双线程模型，将逻辑层（App Service）和视图层（View）分离开来。逻辑层负责处理数据请求、业务逻辑等，而视图层则专注于页面的渲染和展示。
   • 逻辑层与视图层的通信：逻辑层和视图层之间的通信通过微信客户端提供的WeixinJSBridge来实现。这个桥梁将小程序的运行环境和微信客户端（Native）连接起来，负责在渲染进程和逻辑进程之间传递数据和事件。
     • setData：逻辑层通过调用setData函数将数据传递到视图层。这是逻辑层更新视图层数据的主要方式，每次调用setData都会触发一次线程间的通信。当数据更新频繁或传递数据量较大时可能会出现性能问题。因此，小程序的优化手段中有一个就是尽量减少setData的调用。
     • 事件系统：视图层的事件（如用户点击）会通过事件系统发送给逻辑层。在WXML中，开发者可以为元素绑定事件处理函数，当事件发生时，对应的逻辑层中的事件处理函数会被调用。
     • Native中转： 逻辑层发送的网络请求也经由Native转发。这意味着逻辑层和视图层的通信会经过微信的客户端（Native）做中转，逻辑层发送网络请求也经由Native转发。
   • 数据绑定和响应式原理：小程序支持数据绑定，逻辑层通过setData方法将数据变化通知到视图层，触发视图层页面更新；视图层则将触发的事件通知到逻辑层进行业务处理。这一机制类似于Vue.js或React的响应式原理，通过数据劫持和发布-订阅模式实现。
   • 双向通信通道： JSBridge作为JavaScript与Native之间的桥梁，实现了双向通信。这意味着JavaScript可以调用Native的功能，同时Native也可以向JavaScript发送消息，如回溯调用结果、消息推送等。
     • JavaScript调用Native：
       • 注入API：通过WebView提供的接口，向JavaScript的Context中注入对象或方法，使得JavaScript在调用这些注入的对象或方法时，可以直接执行相应的Native代码逻辑。
       • 拦截URL Scheme：Web端通过某种方式（例如iframe.src）发送URL Scheme请求，Native拦截到请求并根据URL Scheme进行相关操作。
     • Native调用JavaScript： Native端可以通过执行JavaScript代码来调用JavaScript中的函数。例如，在Android中，可以使用webView.loadUrl("javascript:someFunction()")来调用JavaScript中的someFunction。
2. 运行环境
   • 内置解析器：小程序并非运行在浏览器中，而是运行在微信客户端自定义的内置解析器上。这个解析器基于浏览器内核重构，但并非完整的浏览器对象，因此小程序中没有DOM和BOM的相关API。
   • Webview实例：在Android端，微信小程序使用WebView进行页面渲染；在iOS端，微信小程序则使用WKWebView。
   • 多Webview实例：由于小程序可能包含多个页面，每个页面都有自己的Webview实例来执行渲染任务。这些Webview实例在独立的进程中运行，确保了页面间的隔离性和安全性。
3. 性能优化
   • Skyline渲染引擎：为了进一步提升渲染性能，微信小程序引入了Skyline渲染引擎。Skyline创建了一条独立的渲染线程来负责Layout、Composite和Paint等渲染任务，从而减轻了JS逻辑对渲染的阻塞。
   • 组件下沉与预编译：Skyline环境下，部分内置组件（如scroll-view、swiper等）被下沉到原生实现，以提升性能和交互体验。同时，WXSS样式表在构建时会被预编译为二进制文件，避免了运行时解析的开销。
   • 长列表按需渲染：针对长列表场景，Skyline优化了scroll-view组件的渲染策略，只渲染可视区域内的节点，并通过lazy mount机制优化首次渲染性能。
4. 开发框架与工具
   • 开发框架：微信小程序提供了一套完整的开发框架，包括逻辑层和视图层的API接口、组件系统、事件系统等。开发者可以使用这套框架快速构建小程序应用。
   • 开发工具：微信官方提供了小程序开发者工具，该工具基于NW.js技术实现，集成了代码编辑、调试、预览等功能，方便开发者进行小程序的开发和测试。

本文大致介绍了微信小程序的底层原理，包括双线程模型、双向通信通道、内置的解析器、Skyline渲染引擎等。