17370845950

Web Workers 是浏览器提供的后台线程 API，用于执行耗时任务而不阻塞主线程；它隔离 DOM、通过消息机制异步通信，支持 Dedicated、Shared、Service 等类型，适用于图像处理、加密解析等 CPU 密集型场景。

JavaScript 本身是单线程的，主线程既要处理 DOM 渲染、用户交互，又要执行脚本逻辑。一旦运行耗时任务（比如大量计算、图像处理、数据解析），页面就会卡顿甚至无响应。Web Workers 就是为了解决这个问题而生的——它让 JS 能在后台开启独立线程执行任务，不阻塞主线程。

Web Workers 是什么

Web Workers 是浏览器提供的 API，允许 JavaScript 在与主线程隔离的后台线程中运行脚本。这个线程不能访问 DOM、window 或 document 对象，也不共享内存，因此不会影响页面渲染和交互。它本质是“真正的多线程”（由浏览器底层实现，通常基于操作系统线程），但 JS 层面仍通过消息机制通信，属于“类多线程”模型。

如何创建和使用 Worker

使用 Web Worker 分三步：准备独立脚本文件、实例化 Worker 对象、通过 postMessage 传递数据。

• 新建一个 JS 文件（如 worker.js），里面写要后台执行的逻辑，用 self.onmessage 接收消息，用 self.postMessage 发送结果
• 在主页面中用 new Worker('worker.js') 创建 worker 实例
• 调用 worker.postMessage(data) 发送数据；用 worker.onmessage 监听返回结果

注意：Worker 脚本必须托管在 HTTP/HTTPS 协议下（不能直接双击打开 file://）；且不能跨域加载。

Worker 间如何通信与数据传递

主线程和 Worker 之间只能通过消息传递数据，通信是异步且拷贝式的（结构化克隆算法）。这意味着传入的对象会被序列化再反序列化，原始引用断开，所以无法共享变量或函数。若需高效传输大量数据（如 ArrayBuffer），可使用 Transferable Objects，把所有权移交过去，避免拷贝开销：

• 例如：worker.postMessage(arrayBuffer, [arrayBuffer]) —— 第二个参数表示将 arrayBuffer “转移”给 Worker，主线程不能再访问它
• 常见可转移对象包括 ArrayBuffer、MessagePort、ImageBitmap 等

Worker 的类型与适用场景

除了最常用的 Dedicated Worker（一对一绑定主线程），还有：

• SharedWorker：多个页面/iframe 可共享同一个 Worker 实例，适合跨 tab 数据同步（如实时通知中心）
• Service Worker：专用于拦截网络请求、实现离线缓存和推送，生命周期独立于页面
• Audio Worklet / Paint Worklet：更专用的 Worker 类型，分别用于音频处理和自定义 CSS 绘图

典型适用场景包括：大数组排序、加密解密、Canvas 图像处理、解析大型 JSON/XML、实时音视频分析等 CPU 密集型任务。