优化http请求的核心是合并、缓存、取消与预加载：用批量接口（如POST /api/batch）将多次请求压为一次；通过Cache-Control和ETag启用强缓存与协商缓存；用AbortController及时取消重复或过期请求；用preload提前加载关键资源。
合并多个小请求为单个批量接口
前端频繁发 GET /api/user/1、GET /api/order/5、GET /api/profile 这类零散请求，是 HTTP 请求数飙升的主因。后端不改，前端基本无解；但若后端愿意支持聚合接口（如 POST /api/batch），就能把 5 次请求压成 1 次。
实操建议：
- 和后端约定统一的 batch 格式，例如传
{ requests: [{ method: "GET", path: "/user/1" }, { method: "GET", path: "/order/5" }] } - 前端封装
batchFetch()函数，自动拆解响应、按原 promise 顺序 resolve - 避免在 batch 中混用强依赖顺序的写操作（如
POST后立刻GET新数据），这类逻辑仍需串行请求 - 注意服务端是否对 batch 请求做限流——单次 batch 超过 10 个子请求可能被拒绝
用 Cache-Control 和 ETag 让重复请求变本地读
很多“请求”其实根本没走网络，只是浏览器没配对缓存策略，导致每次 fetch("/config.json") 都发出去又拿回一模一样的内容。
关键不在前端代码，而在响应头：
立即学习“Java免费学习笔记（深入）”；
- 静态资源（JS/css/图片）：nginx 或 CDN 配置
Cache-Control: public, max-age=31536000（1 年） - 用户配置类接口（如
/api/user/settings）：后端返回ETag: "xyz789"+Cache-Control: no-cache，浏览器下次自动带if-None-Match: "xyz789"，服务端可直接回304 Not Modified - 前端调用
fetch(url, { cache: "default" })即可生效，不用改逻辑；切勿设成"no-store"或手动加时间戳参数破坏缓存
用 AbortController 取消重复或过期的请求
用户快速输入搜索词时，fetch(`/search?q=a`)、fetch(`/search?q=ab`)、fetch(`/search?q=abc`) 全发出去，但只有最后一个结果有用。前两个不仅浪费连接，还可能覆盖正确响应。
正确做法是每次新请求前 abort 上一个：
let controller = null; function search(q) { if (controller) controller.abort(); controller = new AbortController(); return fetch(`/search?q=${q}`, { signal: controller.signal }); }注意点：
-
AbortController是现代浏览器标配（chrome 66+、firefox 57+），IE 完全不支持，需降级方案（如用布尔标记 +then内判断） - 不要在
catch里忽略AbortError：它不是异常，而是预期行为，不应打错误日志 - react/vue 等框架中，需在组件卸载时调用
controller.abort()，否则内存泄漏
静态资源走 preload 或 HTTP/2 Server Push（慎用）
首屏关键 JS/CSS 加载慢，不是因为没发请求，而是请求发起太晚。比如 main.js 里动态 import 了 chart.js，等执行到那行才请求，白白浪费空闲连接。
提前声明依赖：
- html 中加
，让浏览器在解析 HTML 阶段就并发下载 - HTTP/2 Server Push 曾被用来“主动推”资源，但实际效果差（容易推错、难控制优先级），主流 CDN 已默认关闭，不建议配置
- webpack/Rollup 构建时开启
splitChunks，把公共库抽成独立 chunk，配合preload更精准控制加载时机
真正卡住性能的往往不是“能不能少发一次请求”，而是“有没有让该早发的早发、该不发的真不发、该合并的后端愿不愿意接”。缓存策略配错、abort 漏写、batch 接口没共识——这些比抠一个 fetch 调用更容易拖垮体验。