Web Workers 实战：前端重任务的卸载方案

为什么主线程会卡？

JS 是单线程的，所有 UI 渲染和用户交互都在同一个线程上。当你的 TypeScript 高级类型系统项目需要进行大量数据处理时，主线程就会被阻塞，用户看到的就是一张”假死”的页面。

Web Workers 基础

// worker.js — 后台线程
self.onmessage = function(e) {
  const data = e.data;
  // 重计算任务
  const result = heavyCompute(data);
  self.postMessage(result);
};

// main.js — 主线程
const worker = new Worker('worker.js');
worker.postMessage({ items: largeArray });
worker.onmessage = (e) => {
  console.log('结果:', e.data);
};

与 Service Worker 的区别

很多开发者容易混淆 Web Workers 和 微信小程序云开发中使用的 service worker 概念。前者是纯计算线程，后者是用来拦截网络请求的代理线程。

性能对比

关键要点

1. Worker 不能操作 DOM：只能在纯计算场景使用
2. 数据传输成本：大数据量考虑 Transferable Objects
3. 错误处理：Worker.onerror 一定要监听