html5 web worker 本身不支持自动多线程并发网络请求，需通过预建 worker 池、任务队列、状态跟踪和限流分发来实现可控并发，每个 worker 专注单次 fetch 请求并避免 dom 操作。
HTML5 Web Worker 本身不自动支持“多线程并发网络请求”，它只提供独立线程的运行环境。真正实现可控并发，靠的是你主动设计任务调度逻辑——用固定数量的 Worker 实例组成工作池，配合队列、状态跟踪和限流分发，把 fetch 请求合理分配出去。
准备可复用的加载型 Worker 脚本
每个 Worker 应专注完成一次 fetch 请求及基础数据处理，不操作 DOM，也不做状态管理：
- Worker 文件（如 loader.js）监听
self.onmessage，接收 { url, method, headers, timeout, id } 等字段 - 内部使用
fetch()发起请求，并通过AbortController支持超时中断 - 成功后调用
self.postMessage({ id, data, status: 'success' })；失败则返回带错误信息的对象，避免静默失败 - 禁止在 Worker 中访问
localStorage、document或调用alert，否则会报错
预建 Worker 池并维护状态
不要每次请求都 new Worker()，那样开销大、难控制。应提前创建一组实例并长期复用：
- 初始化时创建 3–6 个 Worker，例如：
const workers = Array(4).fill().map(() => new Worker('loader.js')) - 为每个 Worker 维护一个状态对象：
{ instance, busy: false, taskId: null } - 主线程统一监听所有 Worker 的
message事件，收到响应后将其设为busy: false - Worker 自身处理完任务后不退出，保持存活等待下一次
postMessage
实现带并发限制的任务队列
所有请求先进入中央队列，由调度器按空闲 Worker 数量动态派发：
- 用数组模拟任务队列，高优资源（如首屏 JS/CSS）可用
unshift()插入队首 - 设定最大并发数（如
maxConcurrency = 4），仅当空闲 Worker ≥ 1 且队列非空时才派发任务 - 每个任务带唯一
taskId，便于主线程匹配响应与原始请求 - 支持失败重试：任务对象可含
retry: 2字段，Worker 返回 error 后由主线程决定是否重新入队
注意传输效率与调试细节
实际性能瓶颈常不在网络，而在通信与序列化：
- 避免传递大 JSON 或完整 Blob；如需传二进制，用
postMessage(data, [transferList])移交ArrayBuffer，避免拷贝 - 主线程不要对每个 Worker 单独写
worker.onmessage =；推荐统一监听，用event.source区分来源 - 调试时可在 Worker 内加
self.onerror = e => self.postMessage({ error: e.message })，方便捕获未处理异常
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
