用一碗汤粉，理解http的304缓存

2024-02-12 21:27:25

在HTTP协议中，当浏览器第一次访问一个资源时，服务器会把资源的内容和一个状态码返回给浏览器。如果状态码是200，表示请求成功，浏览器会把资源缓存在本地。当浏览器再次访问同一个资源时，它会先检查本地缓存中是否有这个资源。如果有，浏览器就会直接从缓存中读取资源，而不会再次向服务器发送请求。

这种缓存机制就是HTTP缓存。HTTP缓存可以减少不必要的数据传输，提高web性能。HTTP缓存有两种类型：强缓存和协商缓存。

强缓存是指浏览器在不向服务器发送任何请求的情况下，直接从本地缓存中读取资源。强缓存的判断依据是资源的Expires头和Cache-Control头。

Expires头指定资源的过期时间。如果资源的Expires头已经过期，浏览器就会向服务器发送请求，获取最新的资源。

Cache-Control头控制资源的缓存行为。Cache-Control头可以取的值有很多，常用的有max-age、no-cache和no-store。

max-age指定资源的缓存时间。如果max-age已经过期，浏览器就会向服务器发送请求，获取最新的资源。

no-cache表示浏览器在使用缓存之前，必须向服务器发送请求，验证资源是否仍然有效。

no-store表示浏览器不能缓存资源。

协商缓存是指浏览器在向服务器发送请求时，附带一些请求头，服务器根据这些请求头来判断资源是否需要更新。协商缓存的判断依据是资源的Last-Modified头和ETag头。

Last-Modified头指定资源最后修改的时间。

ETag头是一个唯一的标识符，它代表资源的内容。

当浏览器向服务器发送请求时，它会在请求头中带上If-Modified-Since头和If-None-Match头。If-Modified-Since头指定资源最后修改的时间，If-None-Match头指定资源的ETag。

服务器收到请求后，会比较If-Modified-Since头和资源的Last-Modified头，比较If-None-Match头和资源的ETag头。如果资源没有发生改变，服务器就会返回304状态码，表示资源没有改变，浏览器可以使用本地缓存中的资源。

我们可以用一碗汤粉来形象的解释304缓存的原理和应用。

当我们第一次去餐馆吃汤粉时，餐馆会把一碗汤粉端给我们。这碗汤粉就是资源，餐馆就是服务器，我们就是浏览器。

当我们把汤粉吃完后，餐馆会把碗筷收走。但餐馆并不会把汤粉扔掉，而是会把汤粉放在保鲜柜里保存起来。这保鲜柜就是浏览器的缓存。

当我们下次再去餐馆吃汤粉时，餐馆会先检查保鲜柜里是否有我们上次吃剩下的汤粉。如果有，餐馆就会把这碗汤粉端给我们。这就像浏览器在访问资源时，先检查本地缓存中是否有这个资源。

如果保鲜柜里没有我们上次吃剩下的汤粉，餐馆就会重新做一碗汤粉给我们。这就像浏览器在访问资源时，本地缓存中没有这个资源，浏览器就会向服务器发送请求，获取最新的资源。

304缓存可以应用在很多场景中，比如：

网页静态资源缓存：网页静态资源，比如图片、CSS文件和JavaScript文件，都可以使用304缓存。
API接口缓存：API接口也可以使用304缓存。
CDN缓存：CDN缓存也是一种304缓存。CDN缓存将资源分发到多个节点，当用户访问资源时，CDN会先检查本地是否有这个资源。如果有，CDN就会把资源返回给用户。

304缓存可以有效减少不必要的数据传输，提高web性能。