Web Worker 在独立线程运行，内存隔离，不阻塞主线程；不能访问 DOM 或全局对象，通信需通过 postMessage/onmessage 序列化；须同源 JS 文件，路径相对 HTML；DevTools 在 Sources → Workers 查看；模块 Worker 需 type="module"，禁用 importScripts()。
Web Worker 创建后为什么主线程没卡住？
因为 Web Worker 在浏览器分配的独立线程中运行，与主线程内存隔离。它不能直接操作 document、window 或 localStorage，所有通信必须通过 postMessage() 和 onmessage 进行序列化传递。
常见误操作：在 Worker 文件里写 document.getElementById() —— 会直接报 ReferenceError: document is not defined。
- Worker 脚本必须是同源的独立 JS 文件（不能是内联字符串或 Blob URL，除非显式指定）
- 构造时传入的路径是相对于当前 HTML 的，不是相对于 JS 文件的
- Chrome DevTools 的 “Application → Service Workers” 不显示普通 Worker，得去 “Sources → Workers” 面板查看
如何用 Worker 处理耗时计算而不阻塞 UI？
典型场景：解析大 JSON、加密解密、图像像素处理、复杂路径规划。关键不是“多线程”，而是“把重活移出主线程”。
示例：主线程启动 Worker 并监听结果：
立即学习“Java免费学习笔记（深入）”；
// main.js
const worker = new Worker('./math-worker.js');
worker.postMessage({ type: 'fib', n: 40 });
worker.onmessage = (e) => {
console.log('Result:', e.data); // { result: 102334155 }
};
Worker 文件中必须调用 self.onmessage 接收，用 self.postMessage 返回：
免费 盛世企业网站管理系统(SnSee)系统完全免费使用，无任何功能模块使用限制，在使用过程中如遇到相关问题可以去官方论坛参与讨论。开源 系统Web代码完全开源，在您使用过程中可以根据自已实际情况加以调整或修改，完全可以满足您的需求。强大且灵活 独创的多语言功能，可以直接在后台自由设定语言版本，其语言版本不限数量，可根据自已需要进行任意设置；系统各模块可在后台自由设置及开启；强大且适用的后台管理支
// math-worker.js
self.onmessage = function(e) {
if (e.data.type === 'fib') {
const fib = (n) => n <= 1 ? n : fib(n-1) + fib(n-2);
self.postMessage({ result: fib(e.data.n) });
}
};
- 不要在 Worker 里用
console.log依赖调试 —— 输出会出现在 DevTools 的 “Console” 但归属为 “Worker” 上下文，容易被忽略 - 频繁通信（如每帧传 Canvas 像素）会成为瓶颈，考虑用
Transferable对象（如ArrayBuffer）避免拷贝 - Worker 实例不自动销毁，记得在不需要时调用
worker.terminate()
SharedArrayBuffer + Atomics 能否真正共享内存？
可以，但有严格前提：必须启用跨域隔离（crossorigin 属性 + HTTP 头 Cross-Origin-Embedder-Policy: require-corp 和 Cross-Origin-Opener-Policy: same-origin），否则 SharedArrayBuffer 构造会抛 TypeError。
一旦启用，多个 Worker 可读写同一块内存：
// 主线程 const buffer = new SharedArrayBuffer(1024); const view = new Int32Array(buffer); Atomics.store(view, 0, 42); // worker.js const view = new Int32Array(buffer); console.log(Atomics.load(view, 0)); // 42
- 没有
Atomics直接读写会导致竞态 —— 比如两个 Worker 同时view[0]++，结果可能只加了一次 -
Atomics.wait()和Atomics.notify()可实现简单信号量，但无法替代完整锁机制 - 目前 Safari 对
SharedArrayBuffer支持仍受限（仅 macOS 12.3+ 且需用户手动开启实验性功能）
Worker 中如何加载模块或使用 importScripts？
传统 Worker 只支持 importScripts('a.js', 'b.js') 同步加载脚本，不支持 import 语法。若要用 ES 模块，必须用 new Worker(url, { type: 'module' })。
模块 Worker 示例：
// main.js
const worker = new Worker('./worker.mjs', { type: 'module' });
// worker.mjs
import { heavyCalc } from './utils.mjs';
self.onmessage = (e) => {
self.postMessage(heavyCalc(e.data));
};
-
type: 'module'是必需参数，漏掉会报SyntaxError: Cannot use import statement outside a module - 模块 Worker 中不能用
importScripts()，反之亦然 —— 两者运行环境不兼容 - 动态
import()在模块 Worker 中可用，但注意路径解析仍基于 HTML 页面 URL，不是 Worker 文件位置
