跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

JavaScript如何创建Web Workers?

JavaScript中创建Web Workers需通过Worker构造函数加载独立JS文件,主线程与Worker通过postMessage/onmessage通信,不可访问DOM或共享变量;Worker脚本须为外部文件,支持模块化(type: 'module'),但受限于同源策略、无DOM访问、需HTTP环境等。 JavaScript中创建Web Workers需要通过
Worker
构造函数加载一个独立的JS脚本文件,主线程与Worker之间通过
postMessage()
onmessage
通信,不能直接访问DOM或共享变量。 准备一个独立的Worker脚本文件 Worker必须运行在单独的JS文件中(不能是内联字符串或匿名函数),例如新建
worker.js
// worker.js self.onmessage = function(e) { const data = e.data; // 执行耗时计算(如大数组处理、加密等) const result = data * 2; self.postMessage(result); };
在主线程中实例化Worker并通信 使用
new Worker('路径')
启动,然后用
postMessage()
发送数据,监听
onmessage
接收结果:
// 主页面JS const worker = new Worker('worker.js');

worker.postMessage(42); // 发送数字

立即学习“Java免费学习笔记(深入)”;

Comet AI 浏览器

下载 Comet AI 浏览器,体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作,让 AI 成为你的浏览副驾,大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。

下载

worker.onmessage = function(e) { console.log('Worker返回:', e.data); // 输出 84 };

// 可选:监听错误或终止Worker worker.onerror = function(e) { console.error('Worker出错:', e.message); }; // worker.terminate(); // 手动终止

注意关键限制和 常见问题 Web Workers有明确的运行边界,避开典型误区才能稳定使用: 无法访问
window
document
parent
等全局对象,只能用
self
代替
globalThis
不支持
alert
fetch
(但现代Worker支持)、
localStorage
(可用
indexedDB
) 路径必须是同源的,且不能是
file://
协议(需HTTP服务器环境) 若Worker脚本加载失败,会触发
worker.onerror
,但不会抛出控制台错误,容易被忽略 进阶:使用模块化Worker(ES Module Worker) 现代 浏览器 支持以模块方式加载Worker,更利于代码组织:
// 启动时指定type: 'module' const worker = new Worker('worker.mjs', { type: 'module' });

// worker.mjs中可使用import import { heavyCalc } from './utils.mjs'; self.onmessage = (e) => { self.postMessage(heavyCalc(e.data)); };

注意:
type: 'module'
需服务端支持MIME类型,且所有导入路径必须带扩展名(如
./utils.mjs
)。

相关文章