聊聊小程序的双线程架构

前言

常网IT源码上线啦！
本篇录入吊打面试官专栏，希望能祝君拿下Offer一臂之力，各位看官感兴趣可移步🚶。
有人说面试造火箭，进去拧螺丝；其实个人觉得问的问题是项目中涉及的点 || 热门的技术栈都是很好的面试体验，不要是旁门左道冷门的知识，实际上并不会用到的。
接下来想分享一些自己在项目中遇到的技术选型以及问题场景。

对AI的恐惧。

我们感到不安，是因为我们手中的旧地图，正在失效。我们赖以生存的规则，正在改变。但是，我们并不是站上了悬崖边。我们只是站在了一片新大陆的岸边。这片大陆，物产丰饶，但也充满了未知的挑战。我们每个人，都像第一批登陆的探险家。有的人，看到的是猛兽和风暴，感到恐惧，选择留在船上。而有的人，看到的是前所未见的植物和矿藏，他们选择拿起工具，学习如何与这片大陆共存，如何利用新的资源，去建造一个前所未见的家园。所以，不要害怕。我们唯一要做的，就是勇敢地，踏上这片新大陆。就像迪迦，未来的路，就在脚下。

周末终于出太阳了。

一、前言

为什么小程序是双线程架构。

因为单线程会阻塞渲染、全局状态会污染。

评估维度	传统Web单线程	小程序双线程	性能对比
首屏渲染时间	1200ms	650ms	⬇️ 减少46%
JS错误影响范围	整个页面崩溃	逻辑层隔离	🔒 安全隔离
DOM操作安全风险	高风险	物理隔离	🛡️ 风险消除
60FPS达标率	45%	92%	⬆️ 翻倍提升
内存泄漏影响	全局	线程级隔离	🔄 局部影响

安全隔离：

逻辑层与渲染层物理隔离
禁止跨线程DOM操作

java 复制代码

// 安全拦截实现
Object.defineProperty(window, 'document', {
  get() {
    throw new Error('DOM access forbidden in service thread');
  },
  configurable: false
});

直入正文。

🤡官接着往下追问：你说get的时候调用了track，set的时候调用了trigger，那他们内部具体做了什么？

二、双线程

逻辑层：纯数据处理中心

无法直接操作DOM，因为这样子的好处可以避免恶意脚本攻击。

数据请求
状态管理
事件处理
API调用

逻辑层运行在独立的js线程（JavaScriptCore）

JavaScriptCore 是苹果公司开发的 JavaScript 引擎框架，主要用于 iOS/macOS 平台的 WebKit 浏览器引擎和原生应用开发

渲染层：专注UI呈现

WXML解析
样式计算
布局渲染
事件捕获

渲染层运行在WebView线程，每个页面都是一个独立实例。

根据逻辑层传递的数据动态渲染，即数据驱动更新。

系统层：逻辑渲染层的通信

JSBridge：序列化传递数据（JSON 格式）。
安全管控：拦截非法操作（如直接访问 DOM）。
原生 API：调用摄像头、地理位置等硬件功能。

JSBridge 是 JavaScript 与原生代码（Java/Objective-C/Swift）之间的双向通信桥梁。在混合开发架构中（如小程序、React Native、WebView 等）

通信协议层实现 JS 与原生之间的方法互调

java 复制代码

// JS 调用原生摄像头
JSBridge.invoke('openCamera', { quality: 'high' });

// 原生回调 JS
JSBridge.subscribe('onPhotoTaken', (photo) => { ... });

跨线程通信（以小程序为例）在小程序架构中：

逻辑层（Service）运行在独立 JS 线程
渲染层（View）运行在 WebView 线程
JSBridge 负责这两个线程间的数据传递

序列化处理当逻辑层向视图层发送 10KB 数据时：

java 复制代码

// 逻辑层序列化
const payload = JSON.stringify(bigData);
JSBridge.postMessage(payload); 

// 视图层反序列化
const data = JSON.parse(receivedPayload);

这个过程会产生约 3-5ms 的序列化开销（具体取决于设备性能）

安全沙箱在 WebView 中通过 iframe 或 prompt/console 劫持等方式实现安全通信：

java 复制代码

// 典型实现方式
iframe.src = 'jsbridge://methodName?params=xxx';

应用场景：

小程序（微信/支付宝）
React Native
Cordova/PhoneGap
WebView 嵌入页与原生交互

三、安全架构设计

攻击场景防御：

静态代码扫描（AST分析）
动态行为监控
内存使用画像

java 复制代码

// 原型链污染防护
const originalProto = Object.prototype;
Object.prototype = new Proxy(originalProto, {
  set(target, prop, value) {
    if (prop === '__proto__' || prop === 'constructor') {
      throw new Error('Prototype pollution blocked');
    }
    return Reflect.set(target, prop, value);
  }
});

// iframe攻击防御
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://trusted-domain.com') {
    event.source.postMessage('Access denied', event.origin);
    return;
  }
  // 处理安全消息
});

约束创造自由：