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免费学习笔记(深入)”;
Destoon B2B网站
Destoon B2B网站管理系统是一套完善的B2B(电子商务)行业门户解决方案。系统基于PHP+MySQL开发,采用B/S架构,模板与程序分离,源码开放。模型化的开发思路,可扩展或删除任何功能;创新的缓存技术与数据库设计,可负载千万级别数据容量及访问。 系统特性1、跨平台。支持Linux/Unix/Windows服务器,支持Apache/IIS/Zeus等2、跨浏览器。基于最新Web标准构建,在
下载
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)。









