Web Workers 并非真正多线程,而是内存隔离的独立线程,需通过 URL 实例化(如 Blob URL 或文件路径),仅支持结构化克隆通信,不可传函数/DOM/RegExp等,无 window/document API,须手动错误监听与 terminate 清理。

Web Workers 不能真正实现 JavaScript 多线程——JS 主线程本身仍是单线程的,Workers 只是把脚本挪到独立的、与主线程**内存隔离**的线程里运行,不共享变量,靠 postMessage 通信。
Worker 实例化必须用 URL,不能直接传函数或字符串
很多人想这么写:new Worker(() => { console.log('hi') }) 或 new Worker('console.log(1)'),这会直接报错 SyntaxError: Failed to construct 'Worker': Script URL must be of scheme http, https, or blob。
必须提供一个可加载的脚本 URL:
- 推荐用
Blob URL动态创建(避免额外文件):const code = `self.onmessage = () => self.postMessage('done')`; const blob = new Blob([code], { type: 'application/javascript' }); const worker = new Worker(URL.createObjectURL(blob)); - 或单独写个
worker.js文件,用new Worker('./worker.js') - Vite/webpack 环境下注意:
import.meta.url和相对路径解析行为不同,建议统一用new URL('./worker.js', import.meta.url)构造 URL
主线程和 Worker 之间只能传可序列化的值,不能传函数、DOM 节点、Promise
postMessage 底层走的是结构化克隆算法(structured clone),不支持函数、undefined、Symbol、RegExp、Error、Map/Set(部分环境)、以及任何带原型链的对象。
立即学习“Java免费学习笔记(深入)”;
本书是全面讲述PHP与MySQL的经典之作,书中不但全面介绍了两种技术的核心特性,还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性,书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验,可用于解决开发者在实际中所面临的各种挑战。 本书内容全面深入,适合各层次PHP和MySQL开发人员阅读,既是优秀的学习教程,也可用作参考手册。
常见翻车点:
- 传了
{ data, callback }想让 Worker 回调?不行,callback会被静默丢弃 - 传了
document.getElementById('x')?直接抛DataCloneError - 想传大数组或 TypedArray?可以,但默认会拷贝——如需零拷贝,得用
transferable参数:worker.postMessage(arr, [arr.buffer])
Worker 内不能访问 window、document、localStorage 等主线程专属 API
Worker 运行在独立上下文,全局对象是 self(不是 window),没有 DOM、没有 BOM、不能发同步 XHR、不能用 alert。能用的有:
-
setTimeout/setInterval -
fetch(现代 Worker 支持,但注意 CORS) -
atob/btoa、JSON、TextEncoder/TextDecoder -
importScripts()(加载其他 JS,但不支持 ES module 语法,除非用import+type="module"声明) -
self.postMessage、self.onmessage、self.close()
如果需要操作 canvas 或音频,得靠主线程传数据回来再渲染;Worker 只负责计算密集型任务,比如解析大 JSON、加密解密、图像像素处理。
真正容易被忽略的不是怎么启 Worker,而是错误捕获和生命周期管理:Worker 抛错不会冒泡到主线程,onerror 必须显式监听;长期运行的 Worker 如果没关,会持续占内存;用完记得调 worker.terminate(),别只靠用户关页面来回收。










