03.前端缓存-强缓存、协商缓存总结

缓存的作用

1.减少重复的数据传输，节省流量，节省网费
2.减轻服务器负担，不至于量很大时，服务器吞吐量上限，导致吞吐速度变慢，从而提升性能
3.加快客户端访问速度，无需请求服务器，直接使用客户端缓存，立即呈现

缓存分类

强缓存

强缓存存在客户端缓存数据库中，如果生效，不需要与服务器发生交互

强缓存生效

强制缓存，在缓存数据未失效的情况下，可以直接使用缓存数据

强缓存规则失效

在没有缓存数据的时候，浏览器向服务器请求数据时，服务器会将数据和缓存规则一并返回，缓存规则信息包含在响应header中

对比缓存(协商缓存)

• 需要进行比较判断是否可以使用缓存。即常见的304 Not Modified 状态码，是客户端与服务器协商的结果，需要与服务器发生交互。
• 浏览器第一次请求数据时，服务器会将缓存标识与数据一起返回给客户端，客户端将二者备份至缓存数据库中。
• 再次请求数据时，客户端将备份的缓存标识发送给服务器，服务器根据缓存标识进行判断，判断成功后，返回304状态码，通知客户端比较成功，可以使用缓存数据。

协商缓存生效

协商缓存失效

强缓存与协商缓存优先级

两者可以同时存在，强缓存优先级高于协商缓存，当强缓存生效时，直接使用客户端本地缓存，不再执行协商缓存规则

强缓存

Expires

缓存过期时间（它是http1.0的产物，比Cache-Control http:1.1的产物 的优先级低），用来指定资源到期的时间，是服务器端的具体的时间点，也就是说， Expires=max-age + 请求时间 ，需要和Last-modified结合使用。Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。

Cache-Control

优先级比Expires高，有以下取值

• public 所有内容都将被缓存（客户端和代理服务器都可缓存）
• private 所有内容只有客户端可以缓存，Cache-Control的默认取值
• no-cache 客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
• no-store 所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
• max-age=xxx (xxx is numeric) 缓存内容将在xxx秒后失效

协商缓存

Last-Modified

1. Last-Modified：响应时告诉客户端此资源的最后修改时间
2. If-Modified-Since：当强缓存过期时(使用Cache-Control标识不为no-store)，发现资源具有Last-Modified声明，则再次向服务器请求时带上头If-Modified-Since
3. 服务器收到请求后发现有头If-Modified-Since则与被请求资源的最后修改时间进行比对。若最后修改时间较新，说明资源又被改动过，则响应最新的资源内容并返回200状态码；
4. 若最后修改时间和If-Modified-Since一样，说明资源没有修改，则响应304表示未更新，告知浏览器继续使用所保存的缓存文件

ETag

ETag是实体标签的缩写，根据实体内容生成的一段hash字符串,可以标识资源的状态。当资源发生改变时，ETag也随之发生变化。 ETag是Web服务端产生的，然后发给浏览器客户端。

1. 客户端想判断缓存是否可用可以先获取缓存中文档的ETag，然后通过If-None-Match发送请求给Web服务器询问此缓存是否可用。
2. 服务器收到请求，将服务器的中此文件的ETag,跟请求头中的If-None-Match相比较,如果值是一样的,说明缓存还是最新的,Web服务器将发送304 Not Modified响应码给客户端表示缓存未修改过，可以使用。
3. 如果不一样则Web服务器将发送该文档的最新版本给浏览器客户端

为什么需要ETag？

既然有了Last-Modified，为什么需要ETag？

先看一下Last-Modified值的格式 Sat Apr 08 2023 15:17:34 GMT+0800 (GMT+08:00)

1. 某些服务器不能精确得到文件的最后修改时间， 这样就无法通过最后修改时间来判断文件是否更新了。
2. 有些文件的修改非常频繁，在秒以下的时间内进行修改. Last-Modified只能精确到秒
3. 一些文件的最后修改时间改变了，但是内容并未改变。 我们不希望客户端认为这个文件修改了。
4. 如果同样的一个文件位于多个CDN服务器上的时候内容虽然一样，修改时间不一样。