双线程架构
Last updated
Last updated
小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)
小程序的渲染层和逻辑层分别由2个线程管理:
渲染层:使用了WebView 进行渲染;每个页面对应一个WebView(这也是为什么小程序页面切换流畅度接近原生的原因,同时也限定了小程序的页面不宜过多)
逻辑层:采用 JsCore 线程运行 JS 脚本
这两个线程的通信会经由微信客户端做中转。
产品定位决定了技术目标,继而决定了系统架构
运行在微信App中
安全
逻辑层不可直接操作视图,两者通信由宿主(微信客户端)中转
体验接近原生应用
高效
视图层每个页面都是一个单独的webview
在渲染层,宿主环境会把WXML转化成对应的JS对象,在逻辑层发生数据变更的时候,我们需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层,再经过对比前后差异,把差异应用在原来的DOM树上,渲染出正确的UI界面
渲染层和逻辑层的通信通过事件驱动的方式由微信客户端进行中转。具体方式:
用户通过视图层的交互触发特定的事件 event
然后 event 通过 native 中转传递给逻辑层
逻辑层继而通过一系列的逻辑处理、数据请求、接口调用等行为,将所需要的数据 data 加工好
数据 data 通过 native 中转传递给渲染层
最后渲染层将 data 渲染为可视化的 UI(先进行数据diff,然后将差异进行渲染)
iOS、iPadOS 和 Mac OS
WKWebView
JavaScriptCore
Android
XWeb
v8
Windows
Chromium 内核
Chromium 内核
开发工具上
Chromium Webview
参考: