Web Workers 必须通过 new Worker() 加载同源独立 JS 文件，仅支持 postMessage 通信，无法访问 DOM 或共享内存，HTML4 不支持，调试需专用入口。
Web Workers 必须用 new Worker() 启动，且脚本必须同源
HTML5 的 Worker 是浏览器原生支持的多线程机制，但不是“随便写个 JS 就能跑在线程里”。关键限制是：Worker 脚本必须通过独立的 .js 文件加载（不能是内联字符串或 Blob URL 除非显式构造），且协议、域名、端口必须与主页面完全一致（同源）。常见错误是直接传入函数体字符串，比如 new Worker('console.log(1)') —— 这会报 DOMException: Failed to construct 'Worker'。
正确做法是把逻辑抽成单独文件：
/* worker.js */
self.onmessage = function(e) {
const result = e.data * 2;
self.postMessage(result);
};主页面中这样调用：
const worker = new Worker('worker.js');
worker.postMessage(42);
worker.onmessage = function(e) {
console.log('计算结果：', e.data); // 输出 84
};
postMessage() 是唯一通信方式，不能共享变量或 DOM
Worker 和主线程之间没有共享内存，所有数据都靠 postMessage() 序列化传递（结构化克隆算法）。这意味着：
立即学习“前端免费学习笔记（深入）”；
-
document、window、function、undefined、Symbol等无法传入 Worker - 传大对象（如百 MB 数组）会有明显序列化开销，不如用
Transferable（如ArrayBuffer）零拷贝传递 - Worker 内部不能操作 DOM，也不能访问
localStorage或document.cookie
例如要高效处理图像像素数据：
// 主线程
const buffer = new ArrayBuffer(1024 * 1024);
const worker = new Worker('process.js');
worker.postMessage(buffer, [buffer]); // 第二个参数表示 transfer，避免拷贝/* process.js */
self.onmessage = function(e) {
const buf = e.data; // 直接拿到 ArrayBuffer 引用，原主线程该 buffer 已失效
const view = new Uint8Array(buf);
// 处理像素...
};HTML4 完全不支持 Web Workers，也没有任何标准多线程能力
HTML4 是纯标记规范，不定义 JS 执行模型。所谓“HTML4 能否多线程”，实际问的是“旧浏览器是否支持 Worker”。答案明确：Worker 是 HTML5 新增 API，IE10+、Chrome 4+、Firefox 3.5+ 才开始支持。IE9 及更早版本、所有基于 WebKit 533 以下内核的 Android 浏览器（如 Android 2.3）均无 Worker 构造函数。
如果必须兼容这些环境，只能退回到单线程模拟方案：
- 用
setTimeout()/setInterval()切分长任务，避免界面卡死 - 用
requestIdleCallback()（需降级 polyfill）在空闲时段执行非紧急逻辑 - 服务端渲染或 WebAssembly 不是替代方案——它们不解决浏览器 JS 线程模型问题
调试 Worker 很容易漏掉控制台输出和断点
Worker 的 console.log 不出现在主页面控制台，默认也不显示在 Sources 面板里。Chrome/Firefox 需手动打开专用 Worker 调试入口：
- Chrome：DevTools → Application → Service Workers → 勾选 “Show all” → 找到对应 Worker → 点击链接跳转调试页
- Firefox：Debugger → 左侧 “Workers” 折叠栏 → 展开后点击脚本名
- VS Code + Debugger for Chrome 插件：需在
launch.json中启用"webWorker": true
另外，Worker 内部出错不会触发主页面的 window.onerror，必须监听 worker.onerror 或在 Worker 内加 try/catch + postMessage({ error: ... }) 主动上报。
真正难的不是写 Worker，而是理解它和主线程之间那道不可逾越的“墙”——没有共享状态，没有隐式同步，所有交互都得靠消息来回推。多数人卡在第一步，就是试图绕过这堵墙。
