什么是javascript的web workers_它们如何实现多线程并行计算

云晨姑娘_9874

云晨姑娘_9874

2026-01-10

643人浏览

原创

web workers 是 javascript 的后台线程机制,通过 postmessage/onmessage 通信,数据经结构化克隆传递;专用 worker 用 new worker() 创建,sharedworker 支持多页面共享;不可访问 dom,仅限可序列化数据与特定 transferable 类型。

什么是javascript的web workers_它们如何实现多线程并行计算

JavaScript 本身是单线程的,Web Workers 不是让 JS 变成多线程语言,而是提供一种在后台线程运行脚本的机制——主线程不阻塞,计算任务被卸载到独立的、与主线程内存隔离的 Worker 实例中。

Web Workers 怎么创建和通信?

Worker 必须从外部 JS 文件启动,不能内联;主线程和 Worker 之间只能通过 postMessage() 和 onmessage 传递消息(序列化拷贝,不是共享内存)。

  • new Worker('path/to/worker.js') 创建专用 Worker;new SharedWorker(...) 支持多页面共享(但通信更复杂)
  • 传参只能是可序列化的值(JSON.stringify 能处理的),function、undefined、RegExp、Date(部分环境)、Map/Set(需手动转换)都会丢失或报错
  • Worker 内部不能访问 window、document、localStorage 等 DOM 相关 API,但可以使用 fetch、setTimeout、WebAssembly、IndexedDB
/* main.js */
const worker = new Worker('calc.js');
worker.postMessage({ data: [1, 2, 3, 4, 5], op: 'sum' });
worker.onmessage = (e) => console.log('Result:', e.data); // Result: 15
<p>/<em> calc.js </em>/
self.onmessage = (e) => {
const { data, op } = e.data;
let result = op === 'sum' ? data.reduce((a, b) => a + b, 0) : 0;
self.postMessage(result);
};</p>

为什么不能直接共享变量或调用函数?

因为 Worker 运行在完全独立的执行上下文里:有自己的 self(不是 window),没有事件循环共享,也没有引用传递能力。所谓“多线程”只是并发(concurrent),不是并行(parallel)意义上的内存共享线程。

QuickBooks Mileage CSV
QuickBooks Mileage CSV

使用 qbo-mileage CLI 及用户凭证,从 Airtable、Outlook 或 Google Calendar 记录生成 QuickBooks Online 里程 CSV 文件。

下载
  • 试图在 Worker 中读取主线程的 let x = 42 —— 报错:ReferenceError: x is not defined
  • 传一个对象进去,修改它的属性 —— 主线程原对象不会变,因为是结构化克隆(structured clone),不是引用
  • 想用 Transferable 避免拷贝开销?可以,但仅限 ArrayBuffer、MessagePort、ImageBitmap 等少数类型,且转移后原端自动失效

哪些场景适合用 Web Workers?

适合 CPU 密集型、可拆解、无 DOM 依赖的任务。不适合频繁小数据交互或需要实时 DOM 更新的逻辑。

  • 图像处理(Canvas 像素遍历、滤镜计算)
  • 大数据排序/搜索(如前端本地日志分析)
  • 加密解密、哈希计算(SubtleCrypto 在 Worker 中可用)
  • 解析大型 JSON 或 CSV(配合 stream + TextDecoder 分块处理)
  • 避免 while(true) 或长循环导致页面卡死(但注意:Worker 本身也会卡死自己的线程,需合理分片+setTimeout 或 requestIdleCallback 让出控制权)

真正容易被忽略的是错误边界:Worker 内的未捕获异常不会冒泡到主线程,也不会触发 window.onerror;必须显式监听 worker.onerror 或在 Worker 内用 try/catch + postMessage 上报。还有,Worker 脚本路径受同源限制,跨域会静默失败。

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

2015

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

2902

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

996

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

3279

7

while的用法
while的用法

while的用法是“while 条件: 代码块”,条件是一个表达式,当条件为真时,执行代码块,然后再次判断条件是否为真,如果为真则继续执行代码块,直到条件为假为止。本专题为大家提供while相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.25

334

5

线程和进程的区别
线程和进程的区别

线程和进程的区别:线程是进程的一部分,用于实现并发和并行操作,而线程共享进程的资源,通信更方便快捷,切换开销较小。本专题为大家提供线程和进程区别相关的各种文章、以及下载和课程。

2023.08.10

3798

6

Python 多线程与异步编程实战
Python 多线程与异步编程实战

本专题系统讲解 Python 多线程与异步编程的核心概念与实战技巧,包括 threading 模块基础、线程同步机制、GIL 原理、asyncio 异步任务管理、协程与事件循环、任务调度与异常处理。通过实战示例,帮助学习者掌握 如何构建高性能、多任务并发的 Python 应用。

2025.12.24

1049

20

java多线程相关教程合集
java多线程相关教程合集

本专题整合了java多线程相关教程,阅读专题下面的文章了解更多详细内容。

2026.01.21

363

30

C++多线程相关合集
C++多线程相关合集

本专题整合了C++多线程相关教程,阅读专题下面的的文章了解更多详细内容。

2026.01.21

539

24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习