【微信小程序】小程序的双线程架构，为什么要设计成双线程的，双线程之间如何通信

在开始学习之前，建议看一下官方文档

逻辑层和渲染层

微信小程序是双线程的，有渲染层和逻辑层两个执行环境，渲染层负责页面的渲染和样式，逻辑层负责小程序的逻辑和数据处理。

1. 渲染线程：渲染层使用了 WebView 负责渲染界面，包括解析 wxml，wxss，样式计算，布局排版和绘制试图等操作。
   1. 一个页面是一个 WebView ，所以渲染层会有多个webview
2. 逻辑线程：基于有 JsCore 运行 js 脚本，负责处理业务逻辑和数据处理，包括调用小程序的API、处理事件，请求网络等

为什么要设计成双线程的？

1. 将渲染线程单独分离，可以确保小程序在进行界面渲染和用户交互时能够保持流畅，不会阻塞。
2. 将逻辑线程单独分离，可以确保小程序在进行逻辑处理时不会影响到界面的渲染和响应。
3. 双线程架构的优势
   1. 提高响应速度：两个线程互不影响
   2. 性能优化：将界面渲染和逻辑处理分开，可以更好的利用设备的多核处理器资源，提高小程序的整体性能
   3. 提升用户体验：页面打开更加流畅

渲染层和逻辑层具体如何通信

        本来以为这个底层逻辑没有人问，但是还是被我在面试中遇到了，我一脸懵

1. 两个线程的通信会经过微信的客户端【Native】 做中转，逻辑层发送网络请求也经由 Native 转发
2. 逻辑层，通过调用 setData 函数将数据传递到渲染层
3. 两个线程之间的通信基于微信提供的 WeiXinJsBridge 
   1. 关于 jsBridge 可以参考这篇文章，大同小异
   2. 其实很好理解，渲染层是 webview，逻辑层是【原生】，所以二者的通信原理和开发原生 app 和 h5 的通信是一样的
   3. 每次调用 setData 都需要进行一次线程见的通信，所以在小程序的优化手段中有一个就是，尽量减少 setData 的调用
   4. 关于 setData 请看官网文档

参考

微信小程序双线程模型 - 知乎