web worker 通过外部 js 文件创建，主线程与 worker 线程隔离，需用 postmessage 通信；worker 内不可操作 dom，销毁须调用 terminate 或 close，避免内存泄漏。

JavaScript 中通过 Web Worker 实现多线程，主线程与 Worker 线程完全隔离、不能直接共享内存，需靠 postMessage 通信。创建简单，销毁需主动触发，否则长期驻留内存。

如何创建 Web Worker

Worker 必须从外部 JS 文件启动（不能内联），且受同源策略限制：

• 新建一个独立的 JS 文件（如 worker.js），写入 Worker 的逻辑
• 在主线程中用 new Worker('worker.js') 实例化
• 通过 worker.postMessage(data) 向 Worker 发送数据
• 用 worker.onmessage 或 addEventListener('message', ...) 接收返回

示例：
// main.js

const worker = new Worker('calc.js');<br>
worker.postMessage({ type: 'start', data: [1, 2, 3, 4] });<br>
worker.onmessage = (e) => console.log('结果:', e.data);

Worker 文件怎么写

Worker 脚本运行在独立上下文，没有 window、document 等 DOM 对象，但可使用 self（等价于全局作用域）：

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

• 监听 self.onmessage 或 self.addEventListener('message', ...) 接收消息
• 用 self.postMessage(result) 将结果发回主线程
• 可导入其他脚本：importScripts('lib.js', 'utils.js')
• 支持 fetch、setTimeout、WebAssembly 等，但不可操作 DOM

示例：
// calc.js

self.onmessage = function(e) {<br>
  if (e.data.type === 'start') {<br>
    const sum = e.data.data.reduce((a, b) => a + b, 0);<br>
    self.postMessage({ result: sum });<br>
  }<br>
};

如何正确销毁 Web Worker

Worker 不会自动销毁，即使任务完成也持续运行，必须显式终止：

• 主线程调用 worker.terminate() —— 立即结束 Worker，无法再通信
• Worker 自己调用 self.close() —— 主动退出，释放资源
• 避免内存泄漏：不再需要时及时 terminate，尤其在单页应用组件卸载时
• 注意：terminate 后无法重用该 Worker 实例，需新建

常见做法：

function cleanup() {<br>
  if (worker) {<br>
    worker.terminate();<br>
    worker = null;<br>
  }<br>
}<br>
// 组件卸载或用户离开前调用 cleanup()

注意事项和常见陷阱

Web Worker 强大但有边界，用错容易出问题：

• 传输对象默认是结构化克隆，不是引用传递；若需共享内存，改用 SharedArrayBuffer（需配合 Atomics）
• Worker 中抛出未捕获错误不会影响主线程，但会导致 Worker 静默终止，建议加 self.onerror 监控
• 调试时可在 DevTools 的 Sources → Workers 面板查看和断点调试
• 不支持 localStorage、indexedDB 可用但需在 Worker 内打开（indexedDB.open 是允许的）

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南