什么是Web Workers_JavaScript如何实现多线程

Web Workers 是浏览器提供的后台线程机制，使 JavaScript 能并行执行耗时任务而不阻塞主线程。它通过 postMessage 通信，支持 Dedicated、Shared 和 Service Worker 三类，适用于大数据处理、实时滤镜等场景，但无法操作 DOM 且受同源限制。

Web Workers 是浏览器提供的、让 JavaScript 在后台线程中运行的机制，它能真正实现多线程执行，避免阻塞主线程（即 UI 线程），从而提升页面响应性和性能。

为什么 JavaScript 需要 Web Workers

JavaScript 本身是单线程语言，所有任务（脚本执行、事件处理、渲染）都在同一个主线程上排队运行。一旦遇到耗时计算（如大数据处理、图像分析、加密解密），就会卡住页面，导致按钮无响应、动画掉帧、滚动卡顿。

Web Workers 把这些重任务“搬”到独立的后台线程中执行，主线程继续处理用户交互和渲染，互不干扰。

Web Workers 的基本使用方式

核心是通过 Worker 构造函数 创建一个新线程，并用 postMessage 和 onmessage 进行主线程与 Worker 线程之间的通信。

• 主线程中创建 Worker：const worker = new Worker('worker.js');
• 向 Worker 发送数据：worker.postMessage({data: bigArray});
• 监听 Worker 返回结果：worker.onmessage = (e) => console.log(e.data);
• Worker 脚本（worker.js）中接收并处理：self.onmessage = (e) => { /* 计算 */ self.postMessage(result); };

注意：Worker 中不能访问 window、document、DOM 或大多数全局对象，只能使用部分 API（如 fetch、setTimeout、IndexedDB）。

常见类型与适用场景

专用 Worker（Dedicated Worker）：最常用，一对一绑定，仅被创建它的脚本访问，适合单个计算任务（如实时滤镜处理）。

共享 Worker（Shared Worker）：多个脚本（甚至不同 tab）可共用一个 Worker 实例，适合跨页面状态同步（如实时通知中心）。

Service Worker：虽也属 Worker，但定位不同——专用于拦截网络请求、实现离线缓存和推送，不用于通用计算。

注意事项与限制

• Worker 文件必须来自同源（协议、域名、端口一致），不能是 data: 或 blob: URL（除非显式构造）
• 无法直接操作 DOM，所有 UI 更新仍需由主线程完成
• 通信基于结构化克隆算法，传递的是数据副本而非引用；大型对象（如大数组）会有序列化开销
• 可通过 Transferable（如 ArrayBuffer）实现零拷贝传输，大幅提升大数据量通信效率

Web Workers 不是万能加速器，但它让 JavaScript 在保持单线程模型的同时，拥有了真正的并发能力。合理拆分任务、控制通信频率、善用 Transferable，就能显著改善复杂应用的体验。