浏览器缓存机制与 CDN

① 强缓存：不请求服务器，直接用本地缓存
   Expires（绝对时间，老）/ Cache-Control（相对时间，推荐）
   → Cache-Control: max-age=31536000 表示一年内直接用
② 协商缓存：还是发请求，服务器说「没变」→ 返回 304，浏览器用本地副本
   Last-Modified / If-Modified-Since（秒级，可能不精确）
   ETag / If-None-Match（内容指纹，推荐）

请求资源
  → 命中断言缓存（Cache-Control 未过期）？→ 直接 200(from cache)
  → 否则发请求带 If-None-Match / If-Modified-Since
      → 服务器 304 → 用本地缓存
      → 服务器 200 + 新资源 → 更新缓存

// 运行环境：Node.js 14+（仅用内置 http，无需装包）
// 步骤：node brw-l11.js  （一个文件搞定：先起服务，再自动连发两次请求）
//       第一次打印 200（带 ETag），第二次打印 304（命中协商缓存）

const http = require('node:http')
const crypto = require('node:crypto')
const DATA = 'hello cache'
const etag = '"' + crypto.createHash('md5').update(DATA).digest('hex') + '"'

const server = http.createServer((req, res) => {
  const clientETag = req.headers['if-none-match']
  if (clientETag === etag) {
    res.writeHead(304, { 'ETag': etag, 'Cache-Control': 'max-age=0' })
    return res.end()                      // 没响应体，浏览器用本地缓存
  }
  res.writeHead(200, { 'ETag': etag, 'Cache-Control': 'max-age=0' })
  res.end(DATA)
})

// 先等服务器真正启动成功，再发起请求（放进 listen 回调，避免「服务还没起来就请求」的竞态）
server.listen(3000, async () => {
  console.log('server on http://localhost:3000')
  const r1 = await fetch('http://localhost:3000/')
  const gotEtag = r1.headers.get('etag')
  console.log('第一次:', r1.status, 'ETag=', gotEtag)
  const r2 = await fetch('http://localhost:3000/', { headers: { 'If-None-Match': gotEtag } })
  console.log('第二次(带ETag):', r2.status, '=> 304 即命中协商缓存')
  server.close()
})

<!-- 文件名带内容 hash：内容变了 hash 变 → 强制走新文件 -->
<script src="/assets/index-CRw3c4JD.js"></script>

静态资源（带 hash）：Cache-Control: max-age=31536000, immutable  （一年强缓存）
HTML（不带 hash）  ：Cache-Control: no-cache                    （每次协商，拿到最新引用）