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.jsself.onmessage = function(e) { const data = e.data; // 执行耗时计算（如大数组处理、加密等） const result = data * 2; self.postMessage(result);};
在主线程中实例化Worker并通信
使用new Worker('路径')启动，然后用postMessage()发送数据，监听onmessage接收结果：
// 主页面JSconst 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标准构建，在
2 查看详情 
worker.onmessage = function(e) {console.log('Worker返回：', e.data); // 输出 84};
// 可选：监听错误或终止Workerworker.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中可使用importimport { heavyCalc } from './utils.mjs';self.onmessage = (e) => {self.postMessage(heavyCalc(e.data));};
注意：type: 'module'需服务端支持MIME类型，且所有导入路径必须带扩展名（如./utils.mjs）。
以上就是JavaScript如何创建Web Workers？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544245.html
微信扫一扫 
支付宝扫一扫 
