跳到主要内容

小程序双线程模型：

多个渲染层和一个逻辑层

1、小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本

2、一个小程序存在多个界面，所以渲染层存在多个WebView线程，而这些线程之间的通信会通过微信客户端进行中转。逻辑层发送的网络请求也会通过Native层进行转发

  • 小程序是双线程，第一个是渲染线程【ui渲染】，第二个是逻辑线程【执行js逻辑计算】
  • 小程序的双线程模型并不是用的web worker，而是单独起了一个运行js的沙箱线程。如果使用web worker，那么worker子线程与js主线程是在同一个 web page（或webview）运行时内的，会受到浏览器分配给每个web page的性能约束。而小程序渲染线程由webview承担，js线程是跟webview无关的、独立的线程，所以性能上比web worker好很多
  • 逻辑与渲染分离的线程分工模式一方面能够保证运行在逻辑线程沙箱内的 JavaScript 代码是线程安全的，另一方面由于渲染线程保证了对用户交互行为的快速响应，提高了用户体验。

渲染线程​

  • ui的渲染
  • WebView

每个webview都是独立渲染的，新的webview不会影响旧的webview

多个webview页面如何去共享一个App变量?​

微信小程序会把所有的js文件都放在了一个线程，即JsCore线程

  • 因为js都在一个线程里，所以js文件都能共同访问app.js文件里变量

逻辑线程​

所有代码最终将会打包成一份JS 文件，并在小程序启动的时候运行，直到小程序 销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service。

  • 用于逻辑处理、数据处理、接口调用

Native层是什么​

Native层是指小程序框架运行的宿主环境中的底层原生层。在微信小程序中，宿主环境是微信客户端，而Native层就是微信客户端的底层和功能。

  • 逻辑层和视图层必须通过Native 层通信和数据转发
  • Native层是小程序框架与微信客户端之间的桥梁
  • Native层负责处理底层的原生功能和交互，为小程序提供运行环境和支持
  • 小程序的底层功能支持：Native层提供小程序运行所需的底层功能支持，包括文件系统访问、存储管理、设备信息获取等原生能力的封装和调用

为什么小程序不用浏览器的线程模型？​

与 Web 网站相比，以微信为宿主的小程序更需要考虑安全、性能等因素，保障小程序不会对微信App本身产生安全隐患，同时要尽量达到接近原生应用的性能和用户体验。这是为什么小程序不直接用浏览器的线程模型，非要自己弄一套双线程模型最主要的两个原因

渲染层和逻辑层在同一个进程吗​

逻辑层和渲染层并不在同一个进程中。微信小程序的运行环境采用了多进程架构，其中逻辑层和渲染层分别运行在不同的进程中

  • 逻辑层运行在一个独立的 JSCore 进程中
    • 负责处理小程序的逻辑、数据交互和业务处理等。它主要运行 JavaScript 代码，管理小程序的数据和状态，并且可以进行网络请求、数据计算和逻辑处理等操作
  • 渲染层运行在另一个独立的 WebKit 进程中，负责渲染小程序的界面展示。渲染层通过解析 WXML（微信小程序的界面描述语言）和 WXSS（微信小程序的样式描述语言），将界面元素绘制在屏幕上

多个webview会造成什么问题？​

多个webview渲染层，会造成内存占用问题

  • 所以避免占用内存过大，小程序页面栈有限制，不超过10层

页面栈超过10层会将最后一层替换掉