钉子的生活日记
文章目录

网络缓存学习日记

适合目标：系统掌握浏览器缓存与 HTTP 缓存机制，理解强缓存、协商缓存、缓存头、缓存优先级以及真实项目中的缓存策略。
学习定位：这一份偏“缓存机制 + 实战策略 + 面试重点”。
学习原则：先分清浏览器缓存和 HTTP 缓存，再理解强缓存与协商缓存，最后总结项目里的最佳实践。

目录

  1. 学习总览
  2. 为什么需要缓存
  3. 浏览器缓存和 HTTP 缓存的关系
  4. 强缓存
  5. 协商缓存
  6. 常见缓存头
  7. Expires 和 Cache-Control
  8. Last-Modified 和 ETag
  9. 304 Not Modified
  10. 缓存优先级与请求流程
  11. 实战中的缓存策略
  12. 高频面试题
  13. 一页速记总结
  14. 背诵口诀

1. 学习总览

1.1 缓存到底在学什么

缓存的本质是在解决：

  1. 重复请求太慢
  2. 重复请求浪费带宽
  3. 服务器压力太大

一句话：

缓存是用空间换时间，用存储换网络和性能。

2. 为什么需要缓存

缓存的核心价值：

  1. 减少网络请求次数
  2. 降低服务器压力
  3. 提升页面加载速度
  4. 提升用户体验

3. 浏览器缓存和 HTTP 缓存的关系

浏览器里“缓存”不只是一种东西。

常见层次可以粗略理解为：

  1. 内存缓存
  2. 磁盘缓存
  3. Service Worker 缓存
  4. HTTP 缓存策略

面试里最常考的是 HTTP 缓存。

4. 强缓存

强缓存的特点是：

命中后，浏览器直接使用本地缓存，不会向服务器发起请求。

4.1 常见控制头

  1. Expires
  2. Cache-Control

5. 协商缓存

协商缓存的特点是：

浏览器会向服务器确认资源是否发生变化，如果没变，服务端返回 304。

5.1 常见控制头

  1. Last-Modified / If-Modified-Since
  2. ETag / If-None-Match

6. 常见缓存头

6.1 Cache-Control

最常用、最重要。

常见值：

  1. max-age
  2. no-cache
  3. no-store
  4. public
  5. private

6.2 Expires

HTTP/1.0 时代常见，表示资源过期时间。

6.3 ETag

资源版本标识。

6.4 Last-Modified

资源最后修改时间。

7. Expires 和 Cache-Control

7.1 Expires

特点：

  1. 基于绝对时间
  2. 受客户端和服务端时间影响

7.2 Cache-Control

特点：

  1. 更灵活
  2. 优先级更高
  3. HTTP/1.1 主流方式

7.3 面试结论

Cache-Control 优先级高于 Expires。

8. Last-Modified 和 ETag

8.1 Last-Modified

优点：

  1. 简单
  2. 易理解

缺点：

  1. 精度受时间粒度影响
  2. 有些内容变化但修改时间不一定准确

8.2 ETag

优点：

  1. 更精确
  2. 更适合识别资源内容变化

缺点：

  1. 生成和比较可能更有成本

8.3 面试结论

ETag 一般比 Last-Modified 更准确。

9. 304 Not Modified

当浏览器发起协商缓存请求，服务端确认资源没有变化时，就会返回：

304 Not Modified

这表示：

  1. 资源没变
  2. 浏览器继续用本地缓存

10. 缓存优先级与请求流程

粗略理解流程：

  1. 先看是否命中强缓存
  2. 如果没命中，再看协商缓存
  3. 如果协商成功，返回 304
  4. 否则返回新资源

11. 实战中的缓存策略

11.1 HTML

通常不建议长时间强缓存，因为页面入口经常变化。

11.2 JS / CSS / 图片静态资源

通常适合：

  1. 文件名带 hash
  2. 长时间强缓存

11.3 接口数据

一般要谨慎缓存，取决于业务实时性。

12. 高频面试题

12.1 强缓存和协商缓存的区别

强缓存命中后不发请求；协商缓存会发请求确认资源是否变化。

12.2 Cache-Control 和 Expires 的区别

Expires 是绝对时间，Cache-Control 更灵活且优先级更高。

12.3 ETag 和 Last-Modified 的区别

ETag 更精确，Last-Modified 更简单但精度受限。

12.4 为什么返回 304

表示资源没有变化，浏览器可以继续使用本地缓存。

13. 一页速记总结

13.1 缓存主线

  1. 强缓存
  2. 协商缓存
  3. 缓存头
  4. 资源分类策略

13.2 记忆口诀

先看强缓存，没中再协商；强缓存看 Cache-Control，协商缓存看 ETag 和 Last-Modified。

14. 背诵口诀

强缓存不发请求，协商缓存发请求问服务端；静态资源长缓存，HTML 入口慎缓存。