先说一个核心判断:await 本身并不拖慢性能,真正影响效率的,是你在用它的时候怎么“安排活”。很多开发者一听说优化就想着少用 await,其实方向偏了——关键不是数量,而是避免让它变成“串行瓶颈”或“内存冲击波”。下面这几个优化思路,基本覆盖了大多数场景。
分批处理,别一次全吞
面对几千条数据,直接 for 循环里 await 每一条,等于让所有请求排长队等——总耗时 = 单条耗时 × 条数,肉眼可见的慢。正确的做法是:按固定大小切片,比如每批 30 条。
- 用 for + await 串行拉批:逻辑简单、易调试,适合对顺序敏感或服务端限流严格的场景。
- 用 Promise.all 并发拉多批:比如同时发起 4 批请求,但需限制并发数(3–5 个为宜),防止压垮连接池或触发限流。
- 批次大小选 20–50 比较合理:太小 → 请求频繁、网络开销大;太大 → 单批失败重试成本高、内存占用飙升。
能并行的,绝不排队
多个互不依赖的请求(比如拉用户信息、配置、权限列表),逐个 await 是最常见也最浪费的写法。
- ❌ 错误写法:
const a = await fetchA(); const b = await fetchB();→ 总耗时 = a + b - ✅ 正确写法:
const [a, b] = await Promise.all([fetchA(), fetchB()]);→ 总耗时 ≈ max(a, b) - 如果允许部分失败,改用 Promise.allSettled,结果数组里每个对象都带
status和value/reason,方便处理。
边请求边消费,别攒着等
如果你的目标不是拿到全部数据再渲染,而是“来一批、画一批”,那就别把所有数据 push 到一个大数组里等着。每批 await 结束后,立刻调用处理函数(比如 appendToDOM、writeToDB、transformBatch)。
- 配合 AbortController,用户点击取消时可中断后续批次,响应更及时。
- 避免内存峰值:10 万条数据,分 100 批处理,每批只存 1000 条,比一次性 load 全量省 99% 内存。
主动让出主线程,防页面卡死
即使每批处理很快,连续几十次 await 后紧接大量 DOM 操作,也会挤占渲染时间,导致掉帧。这时候需要“喘口气”。
- 每处理 1–2 批后,加一句
await new Promise(r => setTimeout(r, 0)),让浏览器有机会重绘和响应用户操作。 - 或者用 queueMicrotask 把下一批调度延后到微任务队列末尾,节奏更轻量。
- 对长列表加载、实时日志等场景,这种“主动让出”的设计,比纯技术优化更能保流畅体验。
