双线程架构与渲染原理

双线程架构概述

• 逻辑层：
  • 使用 JavaScriptCore (JSC) 运行 JavaScript 脚本。
• 渲染层：
  • 使用 WebView 渲染页面。

线程之间的通信

• 两个线程通过 Native 微信客户端 进行通信。
• 微信客户端还负责 发送网络请求。

双线程的优势

1. 隔离操作：
   • 开发者无法直接操作 DOM 或跳转页面。
2. 安全性：
   • 便于管控危险 API，避免安全问题。
3. 性能优化：
   • 渲染和逻辑分离，减少互相阻塞。

渲染方法：数据驱动

1. 数据传输：
   • 在逻辑层调用 setData 方法时，将数据序列化为字符串并传输到渲染层。
2. 数据处理：
   • 渲染层 (WebView) 在页面空闲时接收数据。
3. 渲染流程：
   • 合并数据：将新数据与旧数据合并。
   • Diff 算法：比较节点树的差异，更新需要变化的 UI 部分。
   • 更新 UI：将计算结果反映到页面上。

限制

• 每个视图使用独立的 WebView。
• 视图数量限制：不能超过 5 个 WebView。

与 React Native (RN) 的对比

1. CSS 支持：
   • 双线程架构对 CSS 的支持更好，接近 Web 标准。
2. 稳定性：
   • RN 存在较多 Bug，双线程架构更稳定。
3. 法律风险：
   • 双线程架构避免了 RN 的专利问题。

渲染策略

• 小程序：
  • WebView 渲染页面。
  • 部分原生组件由客户端直接渲染。
• React Native：
  • 由客户端直接渲染所有内容。

同层渲染

iOS

• 使用 WKChildScrollView：
  • 将原生组件挂载到支持 overflow: scrolling 和 touch 的组件下方。

Android

• 使用 WebPlugin 实现类似的功能。

双线程架构通过逻辑层和渲染层的分离，提高了小程序的安全性和性能，同时通过数据驱动的渲染方式实现了轻量级、高效的前端体验。