Web Worker 为前端轻量级神经网络推理提供独立计算环境，避免阻塞 UI；实际推理由 JavaScript 模型（如 TensorFlow.js CPU 后端）执行，Worker 仅作运行容器。
HTML5 的 Web Worker 确实可以用于在前端运行轻量级神经网络推理，但需明确：它不直接“实现模型”，而是为推理过程提供**独立于主线程的计算环境**，避免阻塞 UI。真正执行推理的是 JavaScript 实现的模型（如 TensorFlow.js 的 CPU 后端、ONNX.js 或自研前向传播逻辑），Worker 只是承载运行时的容器。
为什么用 Worker 做推理？
神经网络前向传播（尤其是全连接或小卷积）在 CPU 上可能耗时几十到几百毫秒。若在主线程执行，会导致页面卡顿、滚动掉帧、交互无响应。Worker 将计算移出渲染线程，保障页面流畅性，特别适合实时性要求中等的场景（如拍照滤镜预判、表单智能补全、离线语音关键词检测）。
典型实现结构
核心是将模型加载、输入预处理、forward 推理、结果后处理全部放在 Worker 内完成，主线程仅负责通信：
- 主线程：通过
postMessage()发送原始数据（如 ImageData、Float32Array）和指令（如 "run", "load"） - Worker：接收消息 → 加载模型权重（可提前缓存或动态 fetch）→ 预处理 → 执行推理 → 将结果（非 ArrayBuffer 类型需序列化）发回
- 注意：TensorFlow.js 默认在主线程初始化；若要在 Worker 中用 tfjs，需使用
tf.setBackend('cpu')并确保 Worker 支持 ES 模块（用new Worker(..., { type: 'module' })）
关键限制与规避方法
Worker 无法访问 DOM、localStorage、document 等主线程专属 API，这对模型部署有实际影响：
-
模型加载：不能直接
fetch('./model.json')后调用tf.loadLayersModel()（因后者依赖全局 fetch 和 Blob API）。应改用fetch+ 手动解析 JSON/二进制权重，或由主线程加载后通过postMessage(..., [arrayBuffer])传输 ArrayBuffer -
图像输入：不能直接读取
。需主线程调用ctx.getImageData()或canvas.toDataURL()，再传像素数组给 Worker - 性能瓶颈：Worker 是单线程，无法并行多个模型实例。如需高吞吐，可用多个 Worker 或结合 SharedArrayBuffer（需 HTTPS + Cross-Origin-Embedder-Policy）
轻量模型推荐与实践建议
前端推理必须控制模型规模。以下更适合 Worker 场景：
- MobileNetV1/V2（ImageNet top-1 准确率 ~70%，参数量
- 小型 LSTM/GRU（如 128 hidden units，用于文本分类或时序预测）
- 纯 JavaScript 实现的 Tiny YOLO（仅支持单类检测，输出 bbox 数量受限）
- 避免使用 ResNet50、BERT-base 等大模型——即使压缩，Worker 中推理仍可能超 500ms，用户感知明显延迟
实际项目中，建议先用 tfjs-converter 将训练好的 Keras/PyTorch 模型转为 tfjs 格式，再在 Worker 中按需加载；对极简需求，甚至可用纯 JS 写几层全连接网络（sigmoid/ReLU 激活），体积仅几 KB，启动零延迟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
