关键在于将耗时同步计算剥离主线程；适合worker的任务需满足：cpu密集、无dom依赖、数据可序列化；主线程用promise封装postmessage，worker内纯同步计算并及时postmessage返回。
把异步任务放进 Web Worker 里执行，关键不在于“它本就是异步的”，而在于**把真正耗时的同步计算或密集型逻辑剥离出主线程**。JavaScript 的 Promise、async/await 本身不解决卡顿——它们只是让回调排队更合理，但若 doSomeTask() 本身要跑 300ms 连续计算，哪怕包在 Promise 里，照样阻塞渲染。
哪些异步任务值得塞进 Worker
不是所有“带 await 的代码”都适合搬进 Worker。重点看任务本质：
- 需要大量 CPU 计算：比如图像像素处理、加密解密、地理围栏判断（如 turf.pointsWithinPolygon）、大数据排序/聚合
- 纯客户端逻辑，不依赖 DOM 或 window 对象：Worker 里拿不到 document、localStorage（除非用 sharedWorker 配合），也不能直接操作样式或事件
- 数据可序列化：通过 postMessage 传入传出的数据需能被结构化克隆（支持对象、数组、Date、RegExp 等，但不支持函数、DOM 节点、undefined）
主线程怎么发起 Worker 异步调用
用 Promise 包一层 Worker 通信，就能自然融入 async/await 流程：
主线程（main.js）：
function runInWorker(data) {
return new Promise((resolve, reject) => {
const worker = new Worker('calc-worker.js');
worker.onmessage = (e) => {
resolve(e.data);
worker.terminate(); // 用完即关，避免内存泄漏
};
worker.onerror = (err) => {
reject(err);
worker.terminate();
};
worker.postMessage(data); // 发送可序列化的输入
});
}
// 使用方式
async function handleButtonClick() {
const result = await runInWorker({ points: [...], polygon: {...} });
console.log('结果:', result);
updateUI(result); // 此时 UI 依然流畅响应
}
Worker 脚本里怎么写才真正不卡
worker.js 里不能写任何影响主线程的代码，专注“纯函数式”处理：
- 监听 self.onmessage，收到数据后立刻开始计算
- 计算过程必须是同步的（Worker 本身无事件循环压力），但全程不碰 DOM、不发请求（除非用 fetch）、不读写 localStorage
- 计算完立刻 self.postMessage 返回结果，别留状态、别轮询、别 setTimeout 模拟异步（那反而降低效率）
示例（简化版地理点筛选）：
self.onmessage = function(e) {
const { points, polygon } = e.data;
// 这里调用 turf 或自定义算法，纯计算
const inside = [];
for (let i = 0; i
注意边界和常见坑
有些你以为“异步”的操作，其实仍卡主线程：
- XMLHttpRequest / fetch 在主线程发请求没问题，但若响应体巨大且解析 JSON 耗时长（如 10MB 数据 .json.parse()），这一步就要挪进 Worker
- 第三方库（如 turf、moment、xlsx）多数可直接在 Worker 中用，但得确认它不依赖全局对象；turf 的大部分几何函数是纯函数，适合 Worker
- 不要在 Worker 里反复创建新 Worker（嵌套 Worker 支持有限），也不要长期持有大量内存不释放
- 调试 Worker：Chrome DevTools → Sources → Workers 标签页，可断点、查看 console
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
