微信小程序的渲染层和逻辑层之间的通信

Author Avatar
饶英俊（Royin） 5月 06, 2022

了解渲染层和逻辑层

小程序的运行环境分为渲染层和逻辑层。对应模板、样式、脚本在哪个层工作如下所示

  • 渲染层：wxss、wxml

  • 逻辑层：javascript

渲染层和逻辑层对应线程

渲染层和逻辑层分别由 2 个线程进行管理。如下所示

  • 渲染层：使用 WebView 线程进行渲染。由于小程序存在多个界面，所以渲染层存在多个 WebView 线程

  • 逻辑层：使用 JsCore 线程运行 JS 脚本

渲染层和逻辑层如何通信

渲染层和逻辑层之间的通信是通过微信客户端做中转，其中逻辑层发送的网络请求也是经由微信客户端进行转发，下图是小程序的通信模型。（图片来源于微信官方文档）
渲染层和逻辑层如何通信

渲染层和逻辑层通信方法 setData()

介绍 setData() 方法

setData() 方法用于将数据从逻辑层异步发送至渲染层，并同步更新 this.data 的值

setData() 方法的通信原理

视图层和逻辑层并不具备直接通信的能力，当双方需要进行通信时，数据将被转换为字符串形式传递，
转换后的数据被拼接成 Javascript 代码，通过两边各自的 evaluateJavascript() 方法传递到两边的环境执行

比如要逻辑层要传输数据 A 给视图层，数据 A 经过转换和拼接后的 Javascript 代码为 formattedA，通过调用视图层的 evaluateJavascript(formattedA) 进行执行

频繁调用 setData() 的问题

频繁调用 setData() 方法会造成如下问题（以下来源自微信官方文档）

每次 setData 都会触发逻辑层虚拟 DOM 树的遍历和更新，也可能会导致触发一次完整的页面渲染流程。过于频繁（毫秒级）的调用 setData，会导致以下后果

  • 逻辑层 JS 线程持续繁忙，无法正常响应用户操作的事件，也无法正常完成页面切换；

  • 视图层 JS 线程持续处于忙碌状态，逻辑层 -> 视图层通信耗时上升，视图层收到消息的延时较高，渲染出现明显延迟；

  • 视图层无法及时响应用户操作，用户滑动页面时感到明显卡顿，操作反馈延迟，用户操作事件无法及时传递到逻辑层，逻辑层亦无法及时将操作处理结果及时传递到视图层。

该博客版权归饶英俊（Royin）所有，严禁抄袭，欢迎转载。如有反馈或建议等可通过邮箱联系我
本文链接：https://raoyingjun.github.io/2022/05/06/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84%E6%B8%B2%E6%9F%93%E5%B1%82%E5%92%8C%E9%80%BB%E8%BE%91%E5%B1%82%E4%B9%8B%E9%97%B4%E7%9A%84%E9%80%9A%E4%BF%A1/