应使用 web worker 当执行 cpu 密集型任务（如大数据排序、图像处理、加密解密）且单次计算超 16ms 时，以避免主线程阻塞；它不适用于网络请求或 dom 操作等本就异步或不可访问的场景。
JavaScript 本身没有原生多线程，但通过 Web Workers 可以实现真正意义上的后台并行计算，从而把耗时的数据处理任务从主线程剥离，避免页面卡顿、保持 UI 响应流畅。这不是“模拟多线程”，而是浏览器提供的轻量级独立执行环境。
什么时候该用 Web Workers？
适用于 CPU 密集型场景，比如：
- 大数据排序、聚合、过滤（如 10 万+ 条日志分析）
- 图像/音频解码、Canvas 像素批量处理
- 加密解密、哈希计算、JSON Schema 校验
- 离线数据预处理（如 ETL 流水线前端化）
注意：网络请求、DOM 操作、定时器等 I/O 类任务不适用——它们本就异步，且 Worker 无法访问这些 API。
怎么创建和通信？关键三步
主线程与 Worker 之间只能靠消息传递，不能共享内存：
-
写一个独立 JS 文件（如
data-processor.js），里面用self.onmessage接收数据，self.postMessage返回结果 -
主线程中 new Worker(路径) 实例化，并监听
onmessage获取返回值 - 用 postMessage 传数据：注意传的是拷贝（结构化克隆），函数、Date、RegExp、Blob 等部分类型会被自动转换或丢失
示例：主线程发送数组，Worker 做快速排序后返回
const worker = new Worker('data-processor.js');<br>worker.postMessage({ type: 'sort', data: [5, 2, 8, 1] });<br>worker.onmessage = e => console.log('排序结果:', e.data);
（data-processor.js）
self.onmessage = e => {<br> const { type, data } = e.data;<br> if (type === 'sort') {<br> const result = data.sort((a, b) => a - b);<br> self.postMessage(result);<br> }<br>};
大型 SPA 中的实用策略
单页应用常需动态加载、缓存、分片处理大量业务数据，可结合以下方式提升吞吐效率：
-
按需启动 Worker：不常驻，用完即
worker.terminate()，减少内存占用 - 复用 Worker 实例：对高频任务（如实时搜索建议），保持 Worker 存活，多次 postMessage 复用上下文
- 数据分片 + 并行 Worker：将大数组切为若干 chunk，每个 chunk 分配给独立 Worker 处理，最后合并结果（适合 Map-Reduce 类逻辑）
-
配合 Transferable 对象：传 ArrayBuffer、TypedArray 时用
postMessage(data, [buffer])，实现零拷贝移交，大幅提升大数据量传输效率
绕不开的限制和避坑点
Worker 不是万能加速器，踩错容易白忙：
- 不能操作 DOM、不能访问
window/document，所有 UI 更新必须回到主线程 - 频繁小消息通信开销大，应尽量“少而重”——一次传完整数据块，而非逐条推送
- Worker 脚本必须同源，开发时注意本地文件协议（
file://）下会失败，需走本地服务 - 调试较麻烦，Chrome DevTools 的 “Application → Service Workers” 或 “Sources → Workers” 面板可设断点
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
