什么是javascript Web Workers_如何实现多线程编程？-js教程-PHP中文网

什么是javascript Web Workers_如何实现多线程编程？

紅蓮之龍

发布： 2025-12-22 16:43:20

原创

284人浏览过

Web Workers 是浏览器提供的后台线程 API，用于执行计算或 I/O 密集型任务而不阻塞主线程；它不能操作 DOM 或访问 window/document，但支持 fetch、setTimeout 等部分 API；通过 postMessage/onmessage 与主线程通信。

什么是javascript web workers_如何实现多线程编程？

JavaScript 本身是单线程的，但 Web Workers 提供了一种在后台线程中运行脚本的机制，让耗时任务不阻塞主线程，从而保持页面响应流畅。

Web Workers 是什么？

Web Workers 是浏览器提供的 API，允许你在独立于主线程的后台线程中执行 JavaScript。它不能直接操作 DOM，也不能访问 window、document 等全局对象，但可以使用 fetch、setTimeout、WebSockets、IndexedDB 等部分 Web API。

它的核心价值在于：把计算密集型或 I/O 密集型任务（比如图像处理、大数据解析、加密解密）移到后台线程，避免卡住 UI。

如何创建和使用 Worker？

创建一个 Worker 很简单，分三步：

立即学习“Java免费学习笔记（深入）”；

写一个单独的 JS 文件（例如 worker.js），里面放要后台执行的逻辑
在主脚本中用 new Worker('worker.js') 实例化一个 Worker 对象
通过 postMessage() 和 onmessage 在主线程与 Worker 之间传递数据

注意：Worker 中的 this 指向的是 WorkerGlobalScope，不是 window；所以要用 self.postMessage 发送消息，用 self.onmessage 接收。

百度AI开放平台

百度提供的综合性AI技术服务平台，汇集了多种AI能力和解决方案

105

查看详情

一个简单例子：计算斐波那契数列

假设你想算第 40 项斐波那契数，直接在主线程算会卡顿几秒。用 Worker 就能避免：

worker.js：

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

登录后复制

main.js：

const worker = new Worker('worker.js');
worker.postMessage(40);
worker.onmessage = function(e) {
  console.log('结果：', e.data); // 不会阻塞页面
};

登录后复制

Worker 的类型与适用场景

主要有三种 Worker：

Dedicated Worker ：一对一绑定，最常用，适合长期运行的独立任务
Shared Worker ：多个页面/iframe 可共享同一个 Worker，适合跨 tab 协作（如实时同步状态）
Service Worker ：用于拦截网络请求、实现离线缓存和推送，本质是特殊的事件驱动 Worker

日常开发中，Dedicated Worker 覆盖大多数多线程需求；Shared Worker 使用较少，需注意跨源限制；Service Worker 更偏向 PWA 场景，不属于传统“多线程计算”范畴。

以上就是什么是javascript Web Workers_如何实现多线程编程？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

javascript原型链是什么_如何理解继承什么是javascript正则表达式_如何编写高性能的匹配模式 javascript的Next.js是什么_如何构建SSR应用？ javascript内存泄漏是什么_怎样避免常见的内存泄漏？什么是javascript AST_如何用它进行代码分析和转换？