Web Workers与JavaScript多线程编程

Web Workers是HTML5提供的后台线程API，允许JavaScript在独立线程执行耗时任务，避免阻塞主线程。通过postMessage通信，支持Dedicated、Shared和Service Worker三种类型，结合SharedArrayBuffer可实现内存共享与同步，提升多核CPU利用率，增强应用性能与响应性。

JavaScript 一直是单线程语言，依靠事件循环和异步机制处理并发任务。但在处理大量计算时，主线程容易被阻塞，导致页面卡顿。Web Workers 提供了一种在后台线程中运行脚本的方式，从而实现真正的并行执行，提升性能。

什么是 Web Workers？

Web Workers 是 HTML5 引入的浏览器 API，允许 JavaScript 在独立于主线程的后台线程中运行。这意味着你可以把耗时的任务（如数据处理、复杂计算）交给 Worker，避免阻塞用户界面。

Worker 线程不能访问 DOM，也不能使用 red">window 对象，但可以使用部分全局对象，如 self、setTimeout、fetch 等。

创建和使用 Web Worker

要使用 Web Worker，你需要创建一个单独的 JavaScript 文件，作为 Worker 的脚本文件。

立即进入“豆包AI人工智官网入口”；

立即学习“豆包AI人工智能在线问答入口”；

例如，创建一个名为 worker.js 的文件：

self.onmessage = function(e) {
  const data = e.data;
  let result = 0;
  for (let i = 0; i < data; i++) {
    result += i;
  }
  self.postMessage(result);
};

在主脚本中启动 Worker：

const worker = new Worker('worker.js');
worker.postMessage(1000000); // 发送数据
worker.onmessage = function(e) {
  console.log('计算结果:', e.data);
};

通过 postMessage 发送消息，通过监听 onmessage 接收结果。通信是基于事件和消息传递的，数据是复制而非共享。

豆包AI编程

豆包推出的AI编程助手

483

查看详情

SharedArrayBuffer 与更高级的并发控制

虽然普通 Worker 之间不能共享内存，但通过 SharedArrayBuffer 可以实现主线程与 Worker 之间的内存共享。配合 Atomics 操作，可以实现线程间同步。

这适用于需要频繁交换大量数据的场景，比如音视频处理或科学计算。

示例：

// 主线程
const sharedBuffer = new SharedArrayBuffer(4);
const sharedArray = new Int32Array(sharedBuffer);
sharedArray[0] = 0;

const worker = new Worker('atomic-worker.js');
worker.postMessage(sharedArray);

Atomics.wait(sharedArray, 0, 0);
console.log('最终值:', sharedArray[0]);

// atomic-worker.js
self.onmessage = function(e) {
  const arr = e.data;
  Atomics.add(arr, 0, 100);
  Atomics.notify(arr, 0, 1);
};

注意：SharedArrayBuffer 在某些浏览器中默认受限，需启用跨源隔离（Cross-Origin-Opener-Policy 和 Cross-Origin-Embedder-Policy）才能使用。

Worker 类型与适用场景

• Dedicated Worker：专用于创建它的脚本，最常见。
• Shared Worker：可被多个脚本（如多个窗口、iframe）共享，通信通过 Port 对象。
• Service Worker：用于网络代理、缓存、推送通知等，生命周期独立。

选择合适的类型取决于你的应用需求。大多数计算密集型任务使用 Dedicated Worker 即可。

基本上就这些。Web Workers 让 JavaScript 能有效利用多核 CPU，虽不是传统意义上的“多线程编程”，但通过消息传递模型实现了安全的并发处理。合理使用，能显著提升应用响应性和用户体验。

以上就是Web Workers与JavaScript多线程编程的详细内容，更多请关注php中文网其它相关文章！