网络请求优化

// 用 PerformanceNavigationTiming 拆解一次导航的各阶段耗时
const [nav] = performance.getEntriesByType('navigation');

const timings = {
  DNS:  nav.domainLookupEnd - nav.domainLookupStart,   // DNS 解析
  TCP:  nav.connectEnd - nav.connectStart,             // TCP + TLS 握手
  TLS:  nav.connectEnd - nav.secureConnectionStart,    // 仅 TLS 部分
  TTFB: nav.responseStart - nav.requestStart,          // 首字节时间
  下载: nav.responseEnd - nav.responseStart,           // 内容传输
  DOM:  nav.domContentLoadedEventEnd - nav.responseEnd,
};

console.table(timings);

# Nginx 开启 HTTP/2（需 nginx 1.9.5+）
server {
    listen 443 ssl;
    http2 on;                      # nginx 1.25+ 新写法
    server_name example.com;

    ssl_certificate     /etc/nginx/ssl/example.crt;
    ssl_certificate_key /etc/nginx/ssl/example.key;
    ssl_protocols       TLSv1.2 TLSv1.3;

    # 开启 HTTP/3 (QUIC)，需 nginx 1.25.0+ 且编译了 quic 模块
    listen 443 quic reuseport;
    add_header Alt-Svc 'h3=":443"; ma=86400';   # 告知浏览器可升级到 h3
}

# 服务器响应头（强缓存，一年）
HTTP/1.1 200 OK
Content-Type: application/javascript
Cache-Control: public, max-age=31536000, immutable
Content-Length: 84210

# 首次响应：服务器下发校验标识
HTTP/1.1 200 OK
Cache-Control: no-cache
ETag: "5d8c72a5edda8-2c1e"
Last-Modified: Mon, 03 Aug 2026 08:00:00 GMT

# 再次请求：浏览器带上校验条件
GET /index.html HTTP/1.1
If-None-Match: "5d8c72a5edda8-2c1e"
If-Modified-Since: Mon, 03 Aug 2026 08:00:00 GMT

# 未变化：服务器回 304，无响应体，省下传输
HTTP/1.1 304 Not Modified
ETag: "5d8c72a5edda8-2c1e"

# 带哈希的静态资源用强缓存 + immutable
location ~* \.(js|css|woff2|png|jpg|webp|avif)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
    access_log off;
}

# HTML 入口用协商缓存，保证发版后立即生效
location = /index.html {
    add_header Cache-Control "no-cache";
    etag on;
}

// Node/Express 手动实现协商缓存
const crypto = require('crypto');

app.get('/api/config', (req, res) => {
  const body = JSON.stringify(getConfig());
  const etag = '"' + crypto.createHash('md5').update(body).digest('hex') + '"';

  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('ETag', etag);

  if (req.headers['if-none-match'] === etag) {
    return res.status(304).end();   // 命中，无需重传
  }
  res.type('json').send(body);
});

# gzip
gzip on;
gzip_comp_level 6;
gzip_min_length 1024;
gzip_types text/plain text/css application/javascript application/json image/svg+xml;

# Brotli（需 ngx_brotli 模块）
brotli on;
brotli_comp_level 6;          # 动态压缩建议 4-6，兼顾 CPU 与压缩率
brotli_static on;             # 优先使用预压缩好的 .br 文件
brotli_types text/plain text/css application/javascript application/json image/svg+xml;

<!-- dns-prefetch：提前解析第三方域名的 DNS，最轻量 -->
<link rel="dns-prefetch" href="//cdn.example.com" />

<!-- preconnect：提前完成 DNS + TCP + TLS 握手，为关键第三方省下整段连接时间 -->
<link rel="preconnect" href="https://cdn.example.com" crossorigin />

<!-- preload：高优先级预加载当前页必需的关键资源 -->
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/css/critical.css" as="style" />

<!-- modulepreload：预加载 ES 模块（含依赖解析），比 preload as=script 更贴合 ESM -->
<link rel="modulepreload" href="/js/app.js" />

<!-- prefetch：低优先级预取"下一个页面"可能用到的资源，空闲时下载 -->
<link rel="prefetch" href="/js/dashboard.chunk.js" />

<!-- 首屏主图：拉高优先级，加速 LCP -->
<img src="/hero.avif" fetchpriority="high" alt="首屏主图" />

<!-- 折叠下方的次要图：降低优先级，把带宽让给关键资源 -->
<img src="/footer-logo.png" fetchpriority="low" loading="lazy" alt="logo" />

// fetch 同样支持 priority
fetch('/api/critical-data', { priority: 'high' });
fetch('/api/analytics', { priority: 'low' });

HTTP/1.1 103 Early Hints
Link: </css/critical.css>; rel=preload; as=style
Link: </js/app.js>; rel=modulepreload

HTTP/1.1 200 OK
Content-Type: text/html
...完整 HTML...

// 请求去重：相同 key 的进行中请求共享同一个 Promise
const inflight = new Map();

function dedupeFetch(url, options) {
  const key = url + JSON.stringify(options || {});
  if (inflight.has(key)) return inflight.get(key);

  const p = fetch(url, options)
    .then((r) => r.json())
    .finally(() => inflight.delete(key));  // 完成后清理，避免拿到过期数据

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

// 并发控制：限制同时进行的请求数，避免瞬时打满连接
async function runWithConcurrency(tasks, limit = 6) {
  const results = [];
  const executing = new Set();

  for (const task of tasks) {
    const p = Promise.resolve().then(() => task());
    results.push(p);
    executing.add(p);
    p.finally(() => executing.delete(p));

    if (executing.size >= limit) {
      await Promise.race(executing);   // 等最快的一个完成再继续投放
    }
  }
  return Promise.all(results);
}

// 用法：1000 个请求，最多 6 个并发
const urls = Array.from({ length: 1000 }, (_, i) => '/api/item/' + i);
await runWithConcurrency(urls.map((u) => () => fetch(u)), 6);

// 简易 DataLoader：同一 tick 内的 id 合并成一次批量查询
function createBatcher(batchFn, wait = 10) {
  let queue = [];
  let timer = null;

  return function load(id) {
    return new Promise((resolve, reject) => {
      queue.push({ id, resolve, reject });
      if (!timer) {
        timer = setTimeout(async () => {
          const current = queue; queue = []; timer = null;
          try {
            const ids = current.map((q) => q.id);
            const data = await batchFn(ids);           // 一次请求拿回全部
            current.forEach((q, i) => q.resolve(data[i]));
          } catch (e) {
            current.forEach((q) => q.reject(e));
          }
        }, wait);
      }
    });
  };
}

const loadUser = createBatcher((ids) => fetch('/api/users?ids=' + ids.join(',')).then((r) => r.json()));
// 组件各自 loadUser(1)/loadUser(2)/loadUser(3) → 实际只发一次 /api/users?ids=1,2,3

// sw.js
const CACHE = 'v1';

self.addEventListener('fetch', (event) => {
  const { request } = event;

  // 策略1：Cache First —— 静态资源(带哈希)，命中即返回，最快
  if (/\.(js|css|woff2|png|webp|avif)$/.test(request.url)) {
    event.respondWith(
      caches.match(request).then((cached) =>
        cached || fetch(request).then((res) => {
          const copy = res.clone();
          caches.open(CACHE).then((c) => c.put(request, copy));
          return res;
        })
      )
    );
    return;
  }

  // 策略2：Network First —— API 数据，优先新鲜，断网降级到缓存
  if (request.url.includes('/api/')) {
    event.respondWith(
      fetch(request)
        .then((res) => {
          const copy = res.clone();
          caches.open(CACHE).then((c) => c.put(request, copy));
          return res;
        })
        .catch(() => caches.match(request))   // 离线兜底
    );
    return;
  }

  // 策略3：Stale-While-Revalidate —— 先回缓存(秒开)，后台静默更新
  event.respondWith(
    caches.match(request).then((cached) => {
      const network = fetch(request).then((res) => {
        const copy = res.clone();
        caches.open(CACHE).then((c) => c.put(request, copy));
        return res;
      });
      return cached || network;   // 有缓存立即用，同时后台刷新下次用
    })
  );
});

# 开启长连接并调优
keepalive_timeout 65;
keepalive_requests 1000;

# 对上游(反向代理场景)也复用连接
upstream backend {
    server 127.0.0.1:3000;
    keepalive 32;              # 连接池，避免每次请求新建到上游的连接
}

ssl_protocols TLSv1.2 TLSv1.3;
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 1d;
ssl_session_tickets on;
ssl_stapling on;
ssl_stapling_verify on;
ssl_early_data on;            # 开启 TLS 1.3 0-RTT

// Cloudflare Workers：在边缘节点做缓存与改写
export default {
  async fetch(request, env, ctx) {
    const cache = caches.default;
    let response = await cache.match(request);
    if (response) return response;               // 边缘命中，零回源

    response = await fetch(request);
    response = new Response(response.body, response);
    response.headers.set('Cache-Control', 'public, max-age=3600');
    ctx.waitUntil(cache.put(request, response.clone()));  // 异步写边缘缓存
    return response;
  },
};

// 采集真实用户的核心网络指标并上报
import { onLCP, onTTFB, onINP } from 'web-vitals';

function report(metric) {
  navigator.sendBeacon('/rum', JSON.stringify({
    name: metric.name,
    value: Math.round(metric.value),
    id: metric.id,
  }));
}
onTTFB(report);   // 首字节
onLCP(report);    // 最大内容绘制
onINP(report);    // 交互到下次绘制