小程序多线程实战

news2025/5/12 23:53:00

在小程序开发中，由于微信小程序的运行环境限制，原生并不支持传统意义上的多线程编程，但可以通过以下两种核心方案实现类似多线程的并发处理效果，尤其在处理复杂计算、避免主线程阻塞时非常关键：

一、官方方案：Worker 线程（推荐）

微信小程序提供了 Worker 线程，用于在后台运行独立脚本，与主线程并行处理任务，避免主线程卡顿（如页面渲染、用户交互）。

实战步骤

创建 Worker 文件
在项目根目录下新建 workers 文件夹，添加 Worker 脚本（如 calc.worker.js）：

// workers/calc.worker.js
worker.onMessage((res) => {
  if (res.type === 'sum') {
    const result = heavyCalculation(res.data); // 模拟耗时计算
    worker.postMessage({ type: 'sum_result', data: result });
  }
});

配置 app.json
在 app.json 中声明 Worker 路径：
```
{
  "workers": ["workers/calc.worker"]
}
```

主线程调用

// 主线程（如页面JS）
const worker = wx.createWorker('workers/calc.worker.js');

// 发送任务到Worker
worker.postMessage({
  type: 'sum',
  data: [1, 2, 3, 4, 5]
});

// 接收Worker返回结果
worker.onMessage((res) => {
  if (res.type === 'sum_result') {
    console.log('计算结果:', res.data);
    worker.terminate(); // 任务完成后销毁Worker
  }
});

关键限制

无法操作 DOM/BOM：Worker 线程不能访问 wx API、页面元素或全局变量。
文件路径规范：Worker 脚本必须放在独立的目录中，且入口文件名需以 .worker.js 结尾。
通信成本：主线程与 Worker 之间通过 postMessage 通信，大数据传输需注意性能。

二、替代方案：分时任务切片（非真多线程）

对于不支持 Worker 的旧版本小程序或轻量级任务，可通过 任务分片 + setTimeout 模拟异步执行，避免主线程阻塞。

实战示例

function processLargeData(dataArray) {
  let index = 0;
  
  function chunkHandler() {
    while (index < dataArray.length && performance.now() - start < 50) {
      // 单次执行不超过50ms（保持帧率流畅）
      processItem(dataArray[index]);
      index++;
    }
    
    if (index < dataArray.length) {
      setTimeout(chunkHandler, 0); // 让出主线程控制权
    }
  }
  
  const start = performance.now();
  chunkHandler();
}

// 使用
processLargeData(largeArray);

适用场景

大数据遍历（如千条列表过滤）
动画逐帧处理
轻量级计算的渐进式反馈

三、性能优化对比

方案	优势	缺点
Worker 线程	真并行，彻底避免主线程卡顿	通信成本高，无法操作UI
任务切片	无需配置，兼容性好	仍是单线程，无法利用多核CPU

四、实战注意事项

Worker 线程数量限制
单个小程序最多可同时运行 5 个 Worker，超限会触发错误。
数据序列化
postMessage 传输数据时会对对象进行 JSON 序列化/反序列化，避免传递不可序列化对象（如函数）。
调试技巧
- 使用 console.log 在 Worker 中打印日志（需真机调试）。
- 通过开发者工具的 Sources > Workers 面板调试 Worker 脚本。

兼容性处理
检测 Worker 支持性：

if (typeof wx.createWorker === 'function') {
  // 支持Worker
} else {
  // 降级为任务切片
}

五、高级场景扩展

WebAssembly 结合 Worker

将 C++/Rust 编写的计算模块编译为 .wasm 文件，在 Worker 中加载：

// Worker 线程
wx.loadWasm({
  path: 'compute.wasm'
}).then(module => {
  const result = module.exports.heavyTask();
  worker.postMessage({ result });
});

共享内存通信（实验性）

通过 SharedArrayBuffer 实现主线程与 Worker 线程内存共享（需启用 v8 引擎）：

// 主线程
const buffer = new SharedArrayBuffer(1024);
worker.postMessage({ buffer });

// Worker 线程
worker.onMessage(({ buffer }) => {
  const arr = new Int32Array(buffer);
  Atomics.add(arr, 0, 1); // 原子操作避免竞争
});