Web Worker 是浏览器提供的后台线程机制，通过消息传递与主线程通信，不可直接访问 DOM；需用 postMessage 传数据回主线程更新；创建须从外部文件加载，支持结构化克隆与 transferable 优化；模块 Worker 需 type: 'module' 且注意兼容性；Worker 实例需手动 terminate 避免内存泄漏。
Web Worker 是浏览器提供的、让 JavaScript 在后台线程中运行的机制，它不阻塞主线程，能真正实现并发执行——但要注意，它不是“多线程”意义上的共享内存并发，而是通过消息传递（postMessage / onmessage）进行隔离通信。
Web Worker 为什么不能直接访问 DOM？
因为 DOM 操作是主线程专属的，Worker 运行在独立上下文，没有 window、document、localStorage 等全局对象。试图访问会直接抛出 ReferenceError 或 undefined。
- 可用的全局对象只有
self、console、setTimeout、fetch、importScripts()等有限 API - 想操作 DOM？必须把结果通过
postMessage发回主线程，由主线程决定怎么更新 - 常见错误：在 Worker 里写
document.getElementById()—— 运行即报错，且无堆栈提示（除非打开 DevTools 的 Workers 面板）
如何创建并通信一个基本 Worker？
Worker 必须从外部 JS 文件加载（不能是内联字符串或 Blob URL，除非用 URL.createObjectURL()），且路径受同源策略限制。
主线程代码示例：
立即学习“Java免费学习笔记（深入）”；
const worker = new Worker('worker.js');
worker.postMessage({ type: 'calculate', data: [1, 2, 3, 4] });
worker.onmessage = function (e) {
console.log('主线程收到:', e.data); // { result: 10 }
};
worker.onerror = function (e) {
console.error('Worker 报错:', e.message, e.filename, e.lineno);
};
对应 worker.js 内容：
self.onmessage = function (e) {
if (e.data.type === 'calculate') {
const sum = e.data.data.reduce((a, b) => a + b, 0);
self.postMessage({ result: sum });
}
};
-
self在 Worker 中等价于全局作用域，不要用this或window - 传给
postMessage的数据会被结构化克隆（structured clone），不支持函数、DOM 节点、undefined、Symbol - 如需传大量数据（如 ArrayBuffer），可用
transferable选项避免拷贝：postMessage(data, [arrayBuffer])
Worker 中如何加载其他脚本或模块？
Worker 默认不支持 ES Module（import 语法），但可通过 importScripts() 同步加载传统脚本，或使用 new Worker(url, { type: 'module' }) 创建模块型 Worker（需服务端支持 MIME 类型 application/javascript）。
-
importScripts('lib.js', 'utils.js')：按顺序同步加载，任一失败则整个 Worker 初始化失败 - 模块 Worker 示例：
const worker = new Worker('./math-worker.js', { type: 'module' });，然后在math-worker.js中可直接写import { add } from './utils.mjs'; - 注意：模块 Worker 不支持
importScripts()，二者互斥 - Chrome 和 Firefox 支持良好，Safari 对模块 Worker 的
import.meta.url解析有兼容性问题，慎用于生产环境
最易被忽略的一点：Worker 实例不会自动销毁。即使任务完成，只要没调用 worker.terminate() 或页面卸载，它就持续占用内存和线程资源。尤其在频繁创建/销毁场景下（比如每输入一个字符就启一个 Worker 做校验），务必手动清理。
