大家好，我是阿萨。经常看我文章的同学肯定发现了我昨天的文章标题写错了。本来是想写浏览器访问网址时发生了什么？ 结果着急发送，写错了，把网址写成了缓存。错了就错了，也就没有修改。
今天给大家介绍下浏览器缓存工作原理。
浏览器缓存是一种在本地存储网页文件的技术，用于加速页面的加载速度，减少服务器的负载。这些文件可能包括 HTML 文件、CSS 样式表、JavaScript 脚本、图片和其他多媒体内容。
浏览器缓存的工作原理主要涉及两个 HTTP 头：`Cache-Control` 和 `ETag/Last-Modified`。
1. Cache-Control
服务器在响应请求时，可以在 `Cache-Control` 头中指定该资源的缓存策略。例如：
Cache-Control: max-age=3600
上述响应头表示该资源在接下来的 3600 秒（1小时）内都是新鲜的，浏览器无需向服务器请求新的版本。
2. ETag/Last-Modified
对于一些可变资源，服务器会提供 `ETag` 或 `Last-Modified` 头以帮助浏览器验证资源的新鲜度。
- `ETag` 是资源的特定版本的标识符。如果资源发生更改，`ETag` 也会更改。
- `Last-Modified` 表示资源最后一次更改的时间。
当浏览器再次请求这个资源时，它会附带 `If-None-Match`（带有 `ETag` 值）或 `If-Modified-Since`（带有 `Last-Modified` 值）的请求头。
服务器收到请求后，会比较 `ETag` 或 `Last-Modified` 值，以决定是否需要发送全新的资源。如果资源没有更改，服务器会发送一个 `304 Not Modified` 响应，浏览器则会从缓存中加载资源。
例子
假设你在浏览一个网页，这个网页有一个 CSS 样式表。第一次请求这个样式表时，服务器可能会回应：
http
HTTP/1.1 200 OK
Cache-Control: max-age=3600
ETag: "12345"
浏览器将这个响应（包括 CSS 文件和 HTTP 头）存储在本地缓存中。在接下来的一小时内，如果网页再次需要这个 CSS 文件，浏览器会直接从缓存中加载，而不是向服务器发送请求。
一小时后，如果网页再次需要这个 CSS 文件，浏览器会向服务器发送一个请求，包含 `If-None-Match` 头：
GET /style.css HTTP/1.1
If-None-Match: "12345"
服务器会比较 `ETag` 值。如果 CSS 文件没有更改（即 `ETag` 值仍然为 "12345"），服务器会回应：
HTTP/1.1 304 Not Modified
这时，浏览器知道缓存的 CSS 文件仍然是最新的，会直接从缓存中加载。如果 CSS 文件已经更改，服务器会发送新的文件和新的 `ETag` 值。
