17370845950

优化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") 都发出去又拿回一模一样的内容。

关键不在前端代码，而在响应头：

• 静态资源（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 调用更容易拖垮体验。