Web Workers 的详细介绍

Web Workers 是 HTML5 提供的一项技术，允许在浏览器后台运行独立于主线程的脚本，解决 JavaScript 单线程执行导致的性能瓶颈问题。以下是其核心内容：

一、Web Worker 的作用

避免阻塞主线程：将复杂计算、耗时任务移至后台线程，保持页面流畅交互。 提升性能：利用多核 CPU 并行处理任务，加速执行效率。

二、Web Worker 的类型

专用 Worker (Dedicated Worker)

特点： 由主线程创建，仅与创建它的脚本通信。 生命周期： 随创建它的页面关闭而终止。 代码示例：

const worker = new Worker('worker.js');

共享 Worker (Shared Worker)

特点： 可被多个页面或窗口共享，通过端口通信。 兼容性： 部分浏览器（如旧版 IE）不支持。 代码示例：

// 主线程
const worker = new SharedWorker('shared-worker.js');

Service Worker

用途： 主要用于离线缓存、推送通知等 PWA 功能，非通用计算场景。

三、使用方法

创建与通信

主线程：

const worker = new Worker('worker.js');
worker.postMessage({ data: '任务数据' }); // 发送消息
worker.onmessage = (e) => { console.log(e.data); }; // 接收结果

Worker 脚本（worker.js）：

self.onmessage = (e) => {
  const result = heavyCalculation(e.data); // 执行耗时操作
  self.postMessage(result); // 返回结果
};

终止 Worker

主线程主动终止：worker.terminate();

Worker 自关闭：self.close();

错误处理

worker.onerror = (e) => {
  console.error(`Worker 错误：${e.message}`);
};

四、应用场景

大数据处理：如 CSV/JSON 解析、复杂计算。

图像/视频处理：像素级操作、滤镜应用。

加密解密：高强度加密算法（如 AES、RSA）。

实时通信：WebSocket 数据解析或心跳检测。

机器学习：在浏览器中运行轻量级模型推理。

五、限制与注意事项

无法操作 DOM：Worker 线程无法直接访问 window 或 document 对象。

数据通信限制：使用 postMessage 传递的数据需可序列化（如 JSON、ArrayBuffer）。

大文件传输建议用 Transferable Objects 避免复制开销：

worker.postMessage(bigArrayBuffer, [bigArrayBuffer]);

同源策略：Worker 脚本必须与主线程同源，或通过 CORS 加载。 作用域隔离：Worker 内部使用 self 或 DedicatedWorkerGlobalScope，而非 window。

六、优化技巧

复用 Worker：避免频繁创建/销毁，采用 Worker 池管理。 分片任务：将大任务拆分为小片段，分批次处理。 使用共享内存：通过 SharedArrayBuffer 实现多线程间高效数据共享（需注意线程安全）。

七、代码示例：计算斐波那契数列

主线程：

const worker = new Worker('fib-worker.js');
worker.postMessage({ n: 40 }); // 计算第40项
worker.onmessage = (e) => {
  console.log(`结果：${e.data}`);
};

Worker 脚本（fib-worker.js）：

function fib(n) {
  return n <= 1 ? n : fib(n - 1) + fib(n - 2);
}
self.onmessage = (e) => {
  const result = fib(e.data.n);
  self.postMessage(result);
};

八、总结

Web Workers 是提升前端性能的关键工具，适用于 CPU 密集型任务。开发者需权衡其通信开销与计算收益，合理设计任务拆分与数据交互，以最大化利用多线程优势。

转载声明

作者：the_flash

链接：https://juejin.cn/post/7485256842618503209

来源：稀土掘金