将密集型算法移入Web Worker可有效避免主线程卡顿，关键在于剥离DOM依赖、用Transferable Objects传输数据、主线程仅负责调度与渲染。
把密集型算法放进 Web Worker 是解决主线程卡顿最直接有效的方式。核心就一点：让耗时计算离开 UI 线程，不抢渲染和交互的资源。
哪些算法适合搬进 Worker
判断标准很简单——只要它在主线程跑超过 16ms（即一帧时间），就该考虑迁移。典型场景包括：
- 大数据排序/过滤（如 10 万条以上数组的
sort()或filter()） - 图像像素级处理（Canvas 卷积、灰度转换、缩放）
- 数学密集运算（矩阵乘法、FFT、物理模拟、加密解密）
- 实时文本搜索（尤其在几 MB 的文档中做模糊匹配）
- 递归类高复杂度计算（如斐波那契、路径搜索、树遍历）
搬移的关键三步
不是简单复制粘贴代码，要按通信逻辑重构：
-
拆离 DOM 和全局依赖：Worker 里不能用
document、localStorage、fetch（除非用self.fetch且注意跨域）、也不能调用主线程定义的函数。所有输入必须通过postMessage传入，输出也只靠postMessage返回。 -
数据传输要轻量：避免传大对象。优先用
Transferable Objects（如ArrayBuffer）实现零拷贝。例如处理图像数据时，传imageData.data.buffer并在postMessage第二个参数中声明转移：worker.postMessage({buffer}, [buffer])。 - 主线程只管调度和渲染：主线程发起任务、监听结果、更新 UI；Worker 只接收数据、执行纯计算、返回结果。中间不掺杂状态管理或副作用逻辑。
一个真实可用的结构示例
假设你要对一个 50 万条记录的数组做条件过滤：
立即学习“Java免费学习笔记（深入）”；
-
主线程（main.js）：
const worker = new Worker('filter-worker.js');worker.postMessage({ data: hugeArray, keyword: 'searchTerm' });worker.onmessage = e => renderResults(e.data.filtered); -
Worker 文件（filter-worker.js）：
self.onmessage = e => {
const { data, keyword } = e.data;
const filtered = data.filter(item => item.title?.includes(keyword));
self.postMessage({ filtered });};
容易忽略但影响很大的细节
实际落地时，这几个点常决定成败：
- Worker 脚本必须是独立文件（或使用
Blob URL动态生成），不能是内联字符串（多数浏览器不支持） - 错误不会自动冒泡到主线程控制台，需在 Worker 内加
self.onerror或用worker.addEventListener('error')捕获 - 频繁小任务别反复新建 Worker，可复用单个 Worker 或用 Worker Pool 管理
- 若算法依赖第三方库（如 mathjs），需确保它能在无 DOM 环境运行；否则考虑用轻量替代或手动实现关键函数
