web worker 与 webassembly 协同实现 cpu 密集任务不卡页面：worker 提供后台线程，wasm 提供近原生性能，二者结合达成计算与渲染分离、多核并行及主线程响应流畅；典型流程为主线程调度、worker 加载执行 wasm、结果高效回传；关键优化包括启用线程支持、共享内存同步、减少 js-wasm 调用、缓存 wasm 实例；适用于音视频处理、科学计算、ai 推理、cad/3d 和加密运算等场景。
Web Worker 与 WebAssembly（Wasm）协同，本质是把“多线程”和“高性能计算”两个能力组合起来：Worker 提供后台线程环境，Wasm 提供接近原生的执行效率。两者一结合，就能让 CPU 密集型任务不卡页面、跑得更快。
为什么必须搭配使用？
单独用 Web Worker，只是把 JavaScript 搬到后台线程——计算本身还是慢；单独用 Wasm，默认在主线程运行，再快也会卡 UI。只有让 Wasm 模块在 Worker 里加载并执行，才能同时实现：
• 计算与渲染彻底分离
• 多核 CPU 并行利用（尤其启用 Wasm 线程后）
• 主线程始终保持响应，滚动、点击、动画都不受影响
核心协作流程
典型工作流分三步，主线程只负责调度和展示：
• 主线程创建 Worker，并通过 postMessage 把任务参数（如数组尺寸、算法类型）发过去
• Worker 内异步加载 Wasm 模块（推荐 WebAssembly.instantiateStreaming），实例化后直接调用导出函数
• 计算完成后，小结果用 postMessage 回传；大结果（如百万级浮点数组）优先复用 SharedArrayBuffer，避免拷贝开销
提升性能的关键细节
真正拉开性能差距的，往往在配置和交互设计上：
• 编译时开启线程支持：Rust 项目需加 --target-feature=+atomics，C/C++ 用 Emscripten 要带 -pthread 和 --shared-memory
• 共享内存必须配合 Atomics 同步，比如用 Atomics.wait 等待计算完成，而非轮询
• 避免高频 JS-Wasm 调用：把循环逻辑写进 Wasm 里，而不是在 JS 中 for 循环调用 Wasm 函数
• Worker 内缓存 Wasm 实例和 Memory 对象，重复任务无需反复编译和分配内存
适合哪些真实场景？
这对组合不是“炫技”，而是解决具体瓶颈：
• 实时音视频处理：滤镜叠加、H.264 解码、WebRTC 前处理
• 科学计算：矩阵乘法、FFT 变换、蒙特卡洛模拟
• AI 推理：轻量模型（如 ONNX Runtime Web）在浏览器端本地运行
• CAD/3D 引擎：几何求交、网格细分、物理碰撞检测
• 加密运算：零知识证明验证、大量哈希计算
