我们第二次访问同一个网站时，页面加载速度会变快，这背后就是HTTP缓存在起作用。缓存能让浏览器少发请求、多复用本地资源，是提升网页加载速度的关键。这篇笔记用大白话讲清缓存的两种类型，新手也能看懂。
一、 缓存的核心作用
一句话总结：让浏览器重复利用之前下载的资源（如图片、CSS、JS），不用每次都向服务器要，既省流量又提速度。
二、 两种缓存类型：强缓存 vs 协商缓存
HTTP缓存分两步走，先查强缓存，再查协商缓存，一步都不能少。
1. 强缓存：直接用本地资源，不麻烦服务器
强缓存是浏览器的“自主判断”，不用给服务器发请求，直接用本地存好的资源。
- 判断依据：看响应头里的
Cache-Control或Expires字段Cache-Control: max-age=86400：资源有效期是86400秒（1天），1天内直接用缓存Expires: Wed, 24 Jan 2025 08:00:00 GMT：到这个时间点前，都能用缓存
- 实战现象：在浏览器开发者工具的Network面板里，资源的状态码显示 200 from disk cache 或 200 from memory cache
2. 协商缓存：问一问服务器，资源能不能用
强缓存过期后，浏览器会去“问”服务器：“我本地的资源还能用吗？”，这就是协商缓存。
- 判断依据：浏览器带两个“凭证”给服务器
Last-Modified：资源最后修改的时间ETag：资源的唯一标识（像资源的身份证号）
- 服务器的两种回复
- 能用：返回状态码 304 Not Modified，浏览器继续用本地缓存
- 不能用：返回状态码 200 OK 和新资源，浏览器更新本地缓存
三、 新手实战小技巧：看缓存是否生效
- 打开浏览器（如Chrome），按F12打开开发者工具
- 切换到Network面板，勾选Disable cache旁边的框（取消禁用缓存）
- 访问目标网站，刷新页面，看资源的Status列：
- 显示200 from cache → 强缓存生效
- 显示304 → 协商缓存生效
- 显示200 → 缓存失效，重新下载资源
四、 缓存的小误区（新手必看）
- 不是所有资源都能缓存：像登录后的用户信息、实时更新的股票数据，一般会设置
Cache-Control: no-cache，跳过强缓存直接走协商缓存。 - 强缓存优先级更高：
Cache-Control和Expires同时存在时，以Cache-Control为准。
五、 入门练习题（附答案）
选择题
- 强缓存生效时，资源的状态码显示为？（）
A. 304 B. 200 from cache C. 404 - 协商缓存的核心判断凭证不包括？（）
A. ETag B. Last-Modified C. Cache-Control - 下列哪个响应头是强缓存的核心字段？（）
A. max-age B. 304 C. 200
简答题
- 强缓存和协商缓存的核心区别是什么？
- 看到状态码304，说明缓存处于什么阶段？
答案
选择题：1.B 2.C 3.A
简答题
- 强缓存不向服务器发请求，直接用本地资源；协商缓存需要向服务器发送请求，确认资源是否可用。
- 说明强缓存已经过期，当前处于协商缓存阶段，且服务器允许继续使用本地缓存。