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');
<p>worker.postMessage(42); // 发送数字</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a></a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1600" title="GentleAI"><img
src="https://img.php.cn/upload/ai_manual/000/969/633/68b6dbb8eec69167.png" alt="GentleAI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1600" title="GentleAI">GentleAI</a>
<p>GentleAI是一个高效的AI工作平台，为普通人提供智能计算、简单易用的界面和专业技术支持。让人工智能服务每一个人。</p>
</div>
<a href="/ai/1600" title="GentleAI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p>worker.onmessage = function(e) {
console.log('Worker返回：', e.data); // 输出 84
};</p><p>// 可选：监听错误或终止Worker
worker.onerror = function(e) {
console.error('Worker出错：', e.message);
};
// worker.terminate(); // 手动终止</p>注意关键限制和常见问题
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' });
<p>// worker.mjs中可使用import
import { heavyCalc } from './utils.mjs';
self.onmessage = (e) => {
self.postMessage(heavyCalc(e.data));
};</p>注意：type: 'module'需服务端支持MIME类型，且所有导入路径必须带扩展名（如./utils.mjs）。
