将耗时计算移入 Web Worker 可避免主线程卡顿，需精准筛选超16ms的纯CPU任务（如大数组排序、图像处理），用 ArrayBuffer 零拷贝通信，主线程响应更新状态，及时终止 Worker 防资源泄漏。

直接把耗时计算放进 Web Worker，主线程就能继续响应点击、滚动和动画——这是 JS 里解决卡顿最实在的办法。关键不是“加个 Worker”，而是搬得准、传得轻、接得稳。

只搬真正该搬的任务

不是所有计算都适合进 Worker。重点筛选单次执行超过 16ms 的纯 CPU 任务，比如：

• 大数组排序（万级及以上）
• 图像像素批量处理（如灰度化、卷积滤波）
• 文件内容哈希计算（SHA-256、MD5 等）
• 复杂数学运算（如模拟物理引擎、路径规划）

像简单的对象遍历、小数据过滤、状态合并这类操作，进 Worker 反而增加通信开销，得不偿失。

用好 postMessage + ArrayBuffer 实现高效通信

主线程和 Worker 之间不能共享内存，靠 postMessage 传递数据。普通 JSON 会触发结构化克隆，大数据量时慢且占内存。优化方式是：

JS X Monitor

X.com (Twitter) 账号监控自动化：定时抓取指定账号最新推文，发现新内容即时推送通知。

下载

• 传原始二进制数据时，用 ArrayBuffer 配合 transferable 选项，实现零拷贝
• 例如处理图像：主线程调用 getImageData 后，取 data.buffer，用 postMessage(data.buffer, [data.buffer]) 发给 Worker
• Worker 接收后直接用 new Uint8ClampedArray(buffer) 操作像素，不复制、不解析

在主线程中自然接入响应式逻辑

Worker 返回结果后，要让 UI 及时更新，但不能在 Worker 里操作 DOM 或直接改 Vue/React 状态。正确做法是：

• 主线程监听 worker.onmessage，拿到结果后同步更新 ref、reactive 或 useState
• 避免在 Worker 中做副作用（如发请求、读 localStorage），它只负责计算
• 如果计算过程需要分阶段反馈（如进度条），Worker 可多次 postMessage 带 type 字段区分（'progress' / 'done'）

记得清理，别让 Worker 白跑

Worker 一旦创建就会持续运行，不手动终止会一直占用资源。尤其在组件卸载、路由跳转时：

• Vue 中可在 onBeforeUnmount 调用 worker.terminate()
• React 中在 useEffect 清理函数里调用 worker.terminate()
• 如果 Worker 是复用的（如全局计算服务），可用引用计数或事件订阅机制管理生命周期