Web Worker 是前端性能优化中处理耗时任务最直接有效的手段，适用于纯计算、不操作 DOM、不依赖 window 或 document 的任务，如大数组处理、复杂数学运算、文本搜索、图像处理及大型文件解析。
Web Worker 是前端性能优化中处理耗时任务最直接有效的手段——它把 CPU 密集型工作从主线程剥离，让页面不卡、不掉帧、响应如常。
哪些任务适合交给 Web Worker
判断标准很明确：任务是否纯计算、不操作 DOM、不依赖 window 或 document。符合就可移入 Worker。
- 大数组排序、过滤、聚合（比如 10 万条日志数据的实时统计）
- 复杂数学运算（质数检测、加密解密、物理模拟、路径规划）
- 文本搜索与模糊匹配（如大型 JSON 配置中的关键词高亮预处理）
- 图像像素级处理（灰度转换、卷积滤镜、Canvas 数据分析）
- 解析大型 JSON/XML/CSV 文件（避免主线程长时间冻结）
基础用法：三步走清清楚楚
主线程和 Worker 线程必须分离为两个文件，通信靠 postMessage 和 onmessage，不能共享变量。
-
第一步：创建 Worker 实例
确保脚本路径同源，且是独立 JS 文件：const worker = new Worker('./data-processor.worker.js'); -
第二步：传数据过去
只传结构化数据（对象、数组、数字、字符串等），不要传函数或 DOM 节点：worker.postMessage({ type: 'filter', keyword: 'error', logs: hugeLogArray }); -
第三步：收结果并更新 UI
收到消息后，在主线程安全地操作 DOM：worker.onmessage = (e) => { document.getElementById('result').textContent = e.data.count; };
关键细节不能忽略
用得不对，Worker 反而拖慢性能。几个实操要点：
立即学习“Java免费学习笔记（深入）”；
-
及时终止不用的 Worker：任务完成或页面卸载前调用
worker.terminate()，释放内存和线程资源 - 避免高频小数据通信：频繁发 1KB 消息 100 次，比一次发 100KB 更慢；尽量合并数据、减少往返
-
大数组传输用 Transferable Objects：传递
ArrayBuffer时加上第二个参数[buffer]，实现零拷贝，大幅提升速度：worker.postMessage(buffer, [buffer]); -
错误必须监听：Worker 内异常不会冒泡到主线程，漏掉
worker.onerror就等于静默失败
进阶建议：让 Worker 更好用
项目变大后，手动管理 Worker 容易混乱。推荐两条路径：
-
用构建工具自动化：Webpack 配合
worker-plugin，支持 ES Module 语法，自动打包 Worker 文件，无需手写 blob URL 或路径拼接 -
简单场景可用内联 Worker：对轻量逻辑（如单次校验），用
Blob + URL.createObjectURL创建 inline Worker，免去额外文件，但不可复用
