浏览器缓存工作原理是什么？

大家好，我是阿萨。经常看我文章的同学肯定发现了我昨天的文章标题写错了。本来是想写浏览器访问网址时发生了什么？ 结果着急发送，写错了浏览器工作原理是怎样的，把网址写成了缓存。错了就错了，也就没有修改。

今天给大家介绍下浏览器缓存工作原理。

浏览器缓存是一种在本地存储网页文件的技术，用于加速页面的加载速度，减少服务器的负载。这些文件可能包括 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 样式表。第一次请求这个样式表时，服务器可能会回应：