10 网络协议与缓存
  ├─ 前置：05 浏览器（同源、存储、渲染）
  ├─ 紧接：11 性能（TTFB/LCP）、12 安全（CORS/XSS/CSRF）
  ├─ 交叉：14 BFF（服务端转发与聚合）、09 构建（资源 hash）
  └─ 长期：17 架构（多地域与容灾）

GET /api/orders?page=1 HTTP/1.1
Host: api.example.com
Accept: application/json
Authorization: Bearer xxx
Cookie: sid=abc
If-None-Match: "v123"

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Cache-Control: private, max-age=60
ETag: "v124"
Content-Length: 245

{"list":[],"total":0}

Accept: application/json              # 期望的响应类型
Content-Type: application/json        # 请求体的类型
Authorization: Bearer <token>         # 令牌
Cookie: sid=abc; theme=dark           # 自动携带
Origin: https://app.example.com       # 跨域来源（浏览器自动加）
Referer: https://app.example.com/list # 来源页面
If-None-Match: "v123"                 # 协商缓存
Accept-Encoding: gzip, br             # 支持的压缩

Content-Type: text/html; charset=utf-8
Cache-Control: public, max-age=31536000, immutable
ETag: "v124"
Last-Modified: Wed, 21 Oct 2026 07:28:00 GMT
Vary: Accept-Encoding
Access-Control-Allow-Origin: https://app.example.com
Set-Cookie: sid=abc; HttpOnly; Secure; SameSite=Lax
Content-Encoding: br

简单请求（不触发 OPTIONS）：
  方法 ∈ {GET, HEAD, POST}
  且 Content-Type ∈ {text/plain, multipart/form-data, application/x-www-form-urlencoded}
  且 无自定义头

其余 → 先发 OPTIONS 预检，通过后才发真实请求

OPTIONS /api/orders HTTP/1.1
Origin: https://app.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type, authorization

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: content-type, authorization
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 86400

缓存键 ≈ 方法 + 规范化 URL + Vary 指定的请求头

// 浏览器缓存策略：强制缓存 + 过期后协商
fetch('/api/config', { cache: 'force-cache' });   // 优先用缓存
fetch('/api/user', { cache: 'no-store' });        // 不缓存（含隐私数据）
fetch('/api/list', { cache: 'no-cache' });        // 每次都协商

强缓存：Cache-Control / Expires
  命中 → 不发请求，直接用本地副本（200 from disk cache）

协商缓存：ETag / Last-Modified
  未命中强缓存 → 带 If-None-Match / If-Modified-Since 询问
    → 未变：304（不传 body，省带宽）
    → 已变：200 + 新内容

# 强缓存 1 年，内容不可变（配合 hash 文件名）
Cache-Control: public, max-age=31536000, immutable

# HTML：每次都验证，保证发布即时生效
Cache-Control: no-cache

# 完全不允许缓存（含中间代理）
Cache-Control: no-store

# 过期后先用旧的，同时后台刷新
Cache-Control: max-age=60, stale-while-revalidate=600

index.html          → no-cache（每次都验证）
/assets/*.a1b2.js   → max-age=31536000, immutable（文件名带 hash）
/api/list           → private, max-age=30, stale-while-revalidate=60

1. 浏览器查强缓存：新鲜 → 直接用（200 from cache），结束
2. 不新鲜 → 带 If-None-Match: "v1" 发请求
3. 服务端比对：一致 → 304（无 body）
4. 浏览器用本地副本渲染
5. 不一致 → 200 + 新 ETag + 新内容

用户 → 边缘节点（L1）
        ├─ 命中 → 直接返回（几毫秒）
        └─ 未命中 → 回源站（几十到几百毫秒）→ 缓存 → 返回

一条 TCP 连接
  ├─ Stream 1: /index.html
  ├─ Stream 3: /app.js
  └─ Stream 5: /api/list
（帧交错传输，互不阻塞）

HTTP/2 over TCP：丢一个包 → 整条连接等重传（TCP 队头阻塞）
HTTP/3 over QUIC(UDP)：每个流独立重传 → 只影响丢包的那条流

/**
 * 刷新令牌的并发控制：多个请求同时 401 时，只刷新一次。
 * 否则会出现「刷新风暴」，把旧 refresh token 用废。
 */
let refreshing = null;

async function request(url, options = {}) {
  let res = await fetch(url, { ...options, credentials: 'include' });

  if (res.status === 401) {
    refreshing ??= fetch('/api/refresh', { method: 'POST', credentials: 'include' })
      .finally(() => { refreshing = null; });
    const ok = await refreshing;
    if (ok.ok) res = await fetch(url, { ...options, credentials: 'include' });
    else location.replace('/login');
  }

  return res;
}

访问令牌：内存（短期，5–15 分钟）
刷新令牌：httpOnly + Secure + SameSite=Lax Cookie
刷新接口：校验 Origin/Referer + CSRF token

/**
 * 单飞刷新：同一时刻只允许一个刷新请求，其余请求排队等待。
 * @param {() => Promise<string>} refresh 刷新函数，返回新 token
 */
function createTokenManager(refresh) {
  let pending = null;

  return {
    async get() {
      if (pending) return pending;
      pending = refresh().finally(() => { pending = null; });
      return pending;
    },
  };
}

TLS 1.2：TCP 三次握手 → TLS 两次往返 → 才发 HTTP（约 3 RTT）
TLS 1.3：TCP 三次握手 → TLS 一次往返 → 发 HTTP（约 2 RTT）
0-RTT：复用上次会话参数，首个请求即可带数据（但有重放风险）

浏览器对同一域名：
  HTTP/1.1 → 约 6 条连接，超出排队
  HTTP/2   → 1 条连接多路复用，但受 TCP 窗口与优先级影响

HTTP/1.1 103 Early Hints
Link: </app.css>; rel=preload; as=style
Link: </hero.webp>; rel=preload; as=image

/**
 * SSE：最适合「服务端持续推送、客户端不常发」的场景。
 * 相比 WebSocket，它自带断线重连与事件 id，实现成本低。
 */
const es = new EventSource('/api/notifications');
es.onmessage = (e) => append(JSON.parse(e.data));
es.onerror = () => {
  // 浏览器会自动重连；如需退避，可关闭后手动重建
};

/**
 * WebSocket：必须自己做心跳与重连。
 */
function connect(url) {
  const ws = new WebSocket(url);
  let timer;

  ws.onopen = () => {
    timer = setInterval(() => ws.send(JSON.stringify({ type: 'ping' })), 30_000);
  };
  ws.onclose = () => {
    clearInterval(timer);
    setTimeout(() => connect(url), Math.min(30_000, retry * 2)); // 指数退避
  };
  return ws;
}

Accept-Encoding: gzip, deflate, br
Content-Encoding: br
Vary: Accept-Encoding

GET /video.mp4
Range: bytes=0-1048575

HTTP/1.1 206 Partial Content
Content-Range: bytes 0-1048575/10485760
Accept-Ranges: bytes

<!-- 提前解析域名（不建立连接） -->
<link rel="dns-prefetch" href="//api.example.com" />
<!-- 提前建连 + TLS（省握手） -->
<link rel="preconnect" href="https://api.example.com" crossorigin />

proxy_buffering off;
proxy_cache off;
proxy_read_timeout 3600s;

/**
 * 用 Resource Timing 采集分段耗时，定位慢在「连接」还是「服务端」。
 * @param {string} url 资源地址
 */
function getTiming(url) {
  const entry = performance.getEntriesByName(url).at(-1);
  if (!entry) return null;

  return {
    dns: entry.domainLookupEnd - entry.domainLookupStart,
    tcp: entry.connectEnd - entry.connectStart,
    tls: entry.secureConnectionStart
      ? entry.connectEnd - entry.secureConnectionStart
      : 0,
    ttfb: entry.responseStart - entry.requestStart,
    download: entry.responseEnd - entry.responseStart,
    total: entry.duration,
  };
}

┌──────────────┐  未命中   ┌──────────────┐  未命中   ┌──────────────┐
│ 浏览器缓存    │ ───────▶ │ CDN 边缘缓存  │ ───────▶ │ 源站/服务端   │
│ 强缓存+协商   │          │ TTL + purge  │          │ 数据缓存/DB  │
└──────────────┘          └──────────────┘          └──────────────┘

/**
 * 接口兜底：失败时用缓存或默认值，避免整页白屏。
 */
async function loadWithFallback(key, fetcher, fallback) {
  try {
    const data = await fetcher();
    localStorage.setItem(key, JSON.stringify(data));
    return data;
  } catch {
    const cached = localStorage.getItem(key);
    return cached ? JSON.parse(cached) : fallback;
  }
}

DNS 0ms（已缓存）
连接 0ms（复用）
TLS 0ms
TTFB 780ms   ← 瓶颈在这里
下载 20ms

/**
 * 前端侧能做的三件事：
 * 1) 请求去重（同一 key 并发只发一次）
 * 2) 缓存兜底（stale-while-revalidate 思路）
 * 3) 超时与退避（避免用户无限等待）
 */
const inflight = new Map();

function getJSON(url, { timeout = 8000 } = {}) {
  if (inflight.has(url)) return inflight.get(url);

  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), timeout);

  const p = fetch(url, { signal: controller.signal })
    .then((r) => {
      if (!r.ok) throw new Error(String(r.status));
      return r.json();
    })
    .finally(() => {
      clearTimeout(timer);
      inflight.delete(url);
    });

  inflight.set(url, p);
  return p;
}

/**
 * 请求封装：超时、指数退避重试、外部取消。
 * @param {string} url
 * @param {RequestInit & {timeout?: number, retries?: number, signal?: AbortSignal}} [options]
 * @returns {Promise<Response>}
 */
async function request(url, { timeout = 8000, retries = 2, signal, ...init } = {}) {
  /** 单次请求：超时与外部取消合并 */
  const once = () => {
    const controller = new AbortController();
    const timer = setTimeout(() => controller.abort(new DOMException('timeout', 'TimeoutError')), timeout);
    const onAbort = () => controller.abort(signal.reason);
    signal?.addEventListener('abort', onAbort, { once: true });

    return fetch(url, { ...init, signal: controller.signal }).finally(() => {
      clearTimeout(timer);
      signal?.removeEventListener('abort', onAbort);
    });
  };

  for (let attempt = 0; ; attempt += 1) {
    try {
      const res = await once();
      // 5xx 可重试，4xx 不重试
      if (res.status >= 500 && attempt < retries) throw new Error(`HTTP ${res.status}`);
      return res;
    } catch (err) {
      const aborted = signal?.aborted || err.name === 'AbortError';
      if (aborted || attempt >= retries) throw err;
      // 指数退避 + 抖动，避免重试风暴
      const delay = 200 * 2 ** attempt + Math.random() * 100;
      await new Promise((resolve) => setTimeout(resolve, delay));
    }
  }
}

/**
 * SSE 客户端：解析 event/data/id，支持断线重连与 Last-Event-ID。
 * @param {string} url
 * @param {{onMessage: (data: string, event: string) => void, retry?: number}} handlers
 */
function createSSE(url, { onMessage, retry = 3000 }) {
  let controller = null;
  let lastId = '';
  let stopped = false;

  const connect = async () => {
    controller = new AbortController();
    const res = await fetch(url, {
      headers: lastId ? { 'Last-Event-ID': lastId } : {},
      signal: controller.signal,
    });
    if (!res.ok || !res.body) throw new Error(`SSE ${res.status}`);

    const reader = res.body.getReader();
    const decoder = new TextDecoder();
    let buffer = '';

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      buffer += decoder.decode(value, { stream: true });

      // 事件以空行分隔，\r\n 与 \n 都要兼容
      const blocks = buffer.split(/\r?\n\r?\n/);
      buffer = blocks.pop() ?? '';

      for (const block of blocks) {
        let event = 'message';
        const data = [];
        block.split(/\r?\n/).forEach((line) => {
          if (line.startsWith('event:')) event = line.slice(6).trim();
          else if (line.startsWith('data:')) data.push(line.slice(5).trimStart());
          else if (line.startsWith('id:')) lastId = line.slice(3).trim();
        });
        if (data.length) onMessage(data.join('\n'), event);
      }
    }
  };

  const start = async () => {
    stopped = false;
    while (!stopped) {
      try {
        await connect();
      } catch (err) {
        if (stopped) return;
      }
      await new Promise((resolve) => setTimeout(resolve, retry));
    }
  };

  return {
    start,
    close() {
      stopped = true;
      controller?.abort();
    },
  };
}