web worker 防卡死的核心是将≥50ms且不操作dom的纯cpu任务移出主线程；需用transferable传递arraybuffer，worker只做计算并返回精简结果，主线程专注ui更新与调度。
用 Web Worker 处理大数据计算防卡死，核心不是“开了线程”，而是把 ≥50ms 的纯 CPU 任务从主线程彻底移走。Worker 本身不提速，它只保证主线程不被拖住——用户能点、能滚、能输，页面始终响应。
哪些计算该进 Worker
判断标准很直接：单次执行耗时 ≥50ms，且完全不碰 DOM。
- 处理上万行表格的分组、聚合、透视（比如按部门统计销售额）
- 图像像素级运算（灰度转换、卷积滤镜、Canvas 帧分析）
- 解析几 MB 的 JSON/CSV 或 Excel（.xlsx 是 ZIP+XML，解压+读流+类型推断全靠 CPU）
- 前端加密（AES 加密大文本）、哈希计算（SHA-256 批量校验）、压缩解压（zlib 流式处理）
- 拓扑图力导向布局（节点超 200 个后，单帧迭代常达 30–80ms）
怎么传数据才不拖慢通信
postMessage 不是快递车，传错东西反而更卡。
- 大 ArrayBuffer（如文件二进制、图像像素数组）务必用 transferable： worker.postMessage(buffer, [buffer])，避免内存拷贝两份
- 结构化数据优先用 TypedArray（Float32Array、Uint8Array），比对象数组省内存、解析快
- 高频触发场景（如拖拽中实时更新布局）别每帧发消息，改用节流 + 合并参数再传
- 结果太多一次传不完？Worker 按每 1000–2000 条打包发送，主线程用 requestIdleCallback 或 setTimeout(..., 0) 分批渲染
Worker 脚本和主线程各干啥
职责划清，才能真流畅。
- Worker 内只做三件事：接收初始数据（数组、参数、偏移映射）、纯数学/逻辑运算（排序、坐标更新、字段转换）、发回简洁结果（如 { "node-5": [124, 89], "node-7": [302, 156] }）
-
主线程专注 UI：读取文件转 ArrayBuffer、预处理成结构化数组（不能让 Worker 自己去查
<table>）、接收结果、批量更新 DOM、调度动画帧（<font color="blue">requestAnimationFrame</font>）、响应点击 <li> <strong>绝对禁止</strong>：Worker 里调 <font color="blue">console.log</font>（尤其循环中，会同步阻塞）、主线程在等待结果时反复操作 DOM（比如边算边加 loading class）、用 <font color="blue">setTimeout</font> 模拟长任务却不分片</li> <h3>别踩这些坑</h3> <p>写错 Worker，可能比不写还卡。</p> <ul> <li>路径要可靠：SPA 项目里 <font color="blue">new Worker('./worker.js')</font> 很容易 404，推荐 <font color="blue">new URL('./worker.js', import.meta.url)</font>（ESM 环境）</li> <li>别滥用多 Worker：Chrome 默认限制约 20 个/页，真实并发受进程调度约束；优先复用实例，避免频繁 <font color="blue">new</font> 和 <font color="blue">terminate()</font> </li> <li>支持取消：主线程发 <font color="blue">{ type: 'abort' }</font>，Worker 内用布尔标记 + 循环检查，及时退出长循环</li> <li>异常必须捕获：损坏文件、内存溢出、非法编码等，统一 <font color="blue">postMessage({ error: 'xxx' })</font>，主线程提示用户，不白屏</li> </ul> </table>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
