web worker的核心是将耗时任务移至后台线程以避免主线程阻塞。它通过消息传递与主线程通信，不共享内存，支持结构化克隆和arraybuffer转移，禁用dom操作，内联worker可用blob url实现。

直接上手练，别先背概念。Web Worker 的核心就一件事：把卡主线程的活儿挪到后台线程干，让页面不卡、点击有响应、进度能刷新。

搞懂它解决什么问题

JavaScript 是单线程的，所有逻辑、渲染、事件都在一个线程跑。一旦执行耗时计算（比如遍历百万级数组、算哈希、处理图片像素），整个页面就“冻住”——按钮点不动、滚动条拖不了、动画停摆。异步（Promise、setTimeout）并不能解决这个问题，它们只是排队等执行，真正执行时还是占着主线程。Worker 是唯一能把 JS 代码真正移出主线程的方式。

动手写两个最小可运行例子

不用追求复杂，先跑通通信闭环：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

• 主线程创建 new Worker('./worker.js')，发一个数字过去
• Worker 文件里用 self.onmessage 接收，做简单运算（如平方），再 self.postMessage 返回
• 主线程用 worker.onmessage 拿结果，打印或更新 DOM
• 加上 worker.onerror 监听错误，比如传错类型或脚本语法出错

重点掌握通信细节

Worker 和主线程不共享内存，靠消息传递交换数据：

• 默认是结构化克隆（deep copy），对象、数组、Date、RegExp 都能传，但函数、DOM 节点、undefined 不行
• 大数据量（如 ArrayBuffer、TypedArray）别直接传，用 postMessage(data, [transferList]) 转移所有权，避免拷贝开销
• 消息是异步的，没有顺序保证，但同一线程内 postMessage 是先进先出
• 别在 Worker 里操作 DOM、调用 alert、读取 localStorage，这些都不支持

进阶一步：试试内联 Worker

不想拆文件？用 Blob URL 就行：

• 把 Worker 逻辑写成字符串，new Blob([codeStr], {type: 'text/javascript'})
• 用 URL.createObjectURL(blob) 得到临时地址，传给 new Worker()
• 用完记得 worker.terminate() + URL.revokeObjectURL() 释放资源

学完这几个点，你就已经覆盖了 90% 的实际使用场景。后面再按需补 Transferable Objects、Worker Pool、SharedArrayBuffer 等高级特性。