Web Workers 不阻塞主线程的关键在于正确通信与资源管理：Worker 需纯计算、禁用 DOM/API、用 Transferable 零拷贝传大数据、主线程异步处理结果、及时终止不用的 Worker。
Web Workers 本身不阻塞主线程事件循环——只要用对了方式。关键不是“避免传递消息”，而是确保通信不反向拖累主线程，也不在 Worker 内误触主线程限制。
Worker 必须彻底脱离 DOM 和全局对象
Worker 脚本运行在独立线程，拥有自己的全局作用域 self（不是 window）。一旦在 Worker 文件里写 document.querySelector、localStorage.getItem 或未声明的变量，会直接报错或静默失败，导致任务卡住、消息无响应。
正确做法：
- Worker 文件只做纯计算：数据转换、加密、排序、图像像素处理等
- 所有输入必须通过
postMessage显式传入，且只传可序列化数据（plain object、ArrayBuffer、TypedArray 等） - 避免在 Worker 中调用
fetch后直接操作 DOM——fetch 可以用，但结果必须发回主线程再处理
消息体要轻量，大数组优先用 Transferable
默认情况下，postMessage 使用结构化克隆算法复制数据。如果传一个几 MB 的数组，主线程会卡在序列化阶段，等同于同步阻塞。
立即学习“Java免费学习笔记（深入）”；
解决方法是用 Transferable Objects，把 ArrayBuffer 的所有权移交 Worker，避免拷贝：
- 主线程发送时：
worker.postMessage({ data }, [data.buffer]) - Worker 接收后，
data.buffer在主线程中自动变为null，内存零拷贝 - 仅适用于
ArrayBuffer、MessagePort、ImageBitmap等少数类型
主线程接收消息后别立刻重绘或深度处理
Worker 返回结果很快，但主线程若在 onmessage 回调里马上执行大量 DOM 操作、复杂状态合并或触发 Vue/React 全量更新，照样造成长任务。
建议：
- 用
requestIdleCallback延迟非紧急更新（如日志汇总、后台统计） - 对渲染类结果（如分页列表），先更新局部状态，再用
requestAnimationFrame批量提交 DOM 变更 - 避免在消息回调中嵌套
Promise.all处理上百个异步项——拆成小批次
及时终止不用的 Worker，防止隐式内存占用
Worker 实例不会自动销毁。长期存活的 Worker 占用独立堆内存，若内部有闭包引用、定时器未清理，可能间接拖慢主线程 GC 周期。
稳妥做法：
- 任务完成即调用
worker.terminate() - 需要复用时，用
worker.postMessage('reset')清空内部状态，而非反复新建 - 监听主线程
beforeunload或页面隐藏时主动 terminate
