一、缓存分类速记
| 类型 | 要点 |
|---|---|
| HTTP 缓存 | 强缓存：不发请求，Cache-Control/Expires；协商缓存：发请求，Last-Modified/ETag，304 用本地 |
| 本地存储 | cookie 4KB 随请求带；localStorage 5M 永久；sessionStorage 关页即清；indexedDB 大容量异步 |
| 内存/运行时 | Memory Cache（关页即没）；JS 变量/Map/闭包；Vue <keep-alive>；React memo/useMemo/useCallback |
| 构建/网络 | 文件名 hash（内容变则更新）；CDN 边缘缓存 |
| TCP/传输 | 内核缓冲区、Keep-Alive 长连接、TFO、TLS 会话复用；队头阻塞→HTTP/2 解应用层，HTTP/3 QUIC 解传输层 |
| PWA | Service Worker + CacheStorage，可离线、可自定义策略 |
二、HTTP 缓存
- 强 vs 协商：强缓存 200 from cache 不请求；协商缓存带
If-Modified-Since/If-None-Match，304 用缓存。头优先级：Cache-Control > Expires；校验时 ETag > Last-Modified。 - ETag 优于 Last-Modified：精度到内容（秒级修改可区分）、内容未改时间改了也不误判、适合多机/分布式。
- 谁在管：响应头一般由 Nginx/CDN（运维） 配；前端做 资源 hash + 工程化，保证更新能生效。浏览器按响应头自动处理，无需前端写缓存逻辑。
三、本地存储区别（一句话）
- cookie：4KB，随请求带，过期可设，做身份/凭证。
- localStorage：约 5M，永久，不随请求发，需手动删。
- sessionStorage：关页即清，同源多页不共享。
- indexedDB：大容量、异步、事务，适合离线/大量数据。
四、TCP 相关（常问）
- 复用/“缓存”：内核收发缓冲区、Keep-Alive、TFO（省 1 RTT）、TLS Session ID/Ticket、滑动窗口/拥塞控制。
- 队头阻塞：TCP 有序，丢包要等重传→后面全堵。HTTP/2 解决应用层队头阻塞；HTTP/3 用 QUIC（UDP）解决传输层队头阻塞。
五、框架缓存（Vue/React）
- Vue：
<keep-alive>缓存组件实例，列表→详情返回不重建；生命周期activated/deactivated。 - React：
React.memo浅比 props 防重渲染；useMemo缓存计算结果；useCallback缓存函数引用。
六、工程化长效缓存
- 静态资源 contenthash：内容不变 hash 不变，利于长缓存。
- HTML 不缓存或短缓存，保证入口总能拿到新资源名。
- 静态资源设较长
max-age，走 CDN 边缘缓存。
面试收尾句
- 整体：从 HTTP 缓存、本地存储、内存/组件缓存，到构建 hash、CDN、SW，再到 TCP 缓冲与连接复用，目标都是少请求、降延迟、提体验。
- HTTP 缓存：浏览器按响应头自动处理；头由 Nginx/CDN 配，前端用 hash 保证资源可更新。
