如何用 Web Workers 开启子线程处理复杂的密集型计算

Web Workers 允许在浏览器中启动独立于主线程的子线程处理耗时计算，避免阻塞 UI；需通过 postMessage 通信，Worker 必须从独立 JS 文件加载，使用结构化克隆传递数据，支持 transferable 提升性能，任务应分片并可中断，调试可通过 DevTools Workers 面板进行。Web Workers 允许你在浏览器中启动独立于主线程的子线程，专门处理耗时的计算任务，避免阻塞 UI 渲染和用户交互。关键在于把计算逻辑从主线程剥离，通过 postMessage 通信，而不是直接共享变量或 DOM。创建专用 Worker 文件并加载Worker 必须从独立的 JavaScript 文件中初始化，不能内联定义（除 Blob URL 外）。例如：新建一个文件 calculator.js，在里面写纯计算逻辑（不能访问 window、document 等）； 在主脚本中用 new Worker('./calculator.js') 实例化； 确保该文件能被服务器正确返回（MIME 类型为 application/javascript），开发时注意本地文件协议（file://）限制，建议用本地服务（如 live-server 或 Vite）运行。主线程与 Worker 之间安全通信双方只能通过消息传递交换数据，且默认是**结构化克隆**（不传函数、DOM 节点、undefined 等）。常见模式： RedClaw 百度推出的手机端万能AI Agent助手