强缓存和协商缓存

网络方面的缓存分为三块

DNS缓存、HTTP缓存、CDN缓存，也有人把这里的 HTTP 缓存称为浏览器缓存

为啥要缓存

1.缓存的优点
(1)加快浏览器加载网页的速度，优化用户体验，让用户更快速的打开我们的网页
(2)减少对服务器的访问次数，减轻服务器的负担
(3)节省带宽（就是节省钱…，因为很多带宽服务其实是按流量来计费的，同样对用户也可以省4G、5G流量…也省钱了）
2. 有啥缺点
　　如果资源一直被缓存了，那当资源发生更改时，用户就无法获取最新的信息了！ 所以缓存虽好，可不能乱用。

强缓存（不发请求到服务器）

1. 强缓存是利用http头中的 Expires 和 Cache-Control 两个字段来控制的
2. 第一次请求时，服务器把资源的过期时间通过响应头中的 Expires 和 Cache-Control 两个字段告诉浏览器，之后再请求这个的话，会判断有没有过期，没有过期就直接拿来用，不向服务器发起请求，这就是强缓存
3. Expires 的值是一个绝对的时间，这个时间代表资源的失效时间，就是说在这个时间之前缓存始终有效，始终会读取缓存中的数据。但是，这里会有一个明显的缺点：因为它是一个绝对时间，当服务器时间与客户端时间有偏差时，就可能会导致缓存失效，比如用户随意修改了本地时间。
4. Cache-Control，http1.1加入了Cache-Control ，它的值 max-age=2592001，表示资源的最大有效时间的“秒数”，是一个相对值，不会因为用户修改本地时间而导致失效。除了mas-age之外还有其他一些值：
   1）public/private: public表示客户端和代理服务器（如CDN）都可以缓存，private（默认值）表示只有客户端可以缓存；
   2）no-cache/no-store: no-cache 客户端缓存内容，但是是否使用缓存需要经过协商缓存来验证决定；no-store 所有内容都不会被缓存，即不使用强缓存，也不使用协商缓存；
5. Expires 更多时候是为了兼容，在不支持 HTTP/1.1 的情况下才会发生作用，两者同时存在的话 Cache-Control 优先级高于 Expires
6. 理解：强缓存就是缓存过期之后，不管资源有没有变化，都会重新发起请求，重新获取资源，而协商缓存实现了资源文件没有更新的情况下，过期了也不重新获取资源，继续使用旧资源

协商缓存（发请求到服务器）

1. 协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程
2. 协商缓存是通过两对值来设置的： Last-Modified/If-Modified-Since 和 ETag/If-None-Match
3. 第一次请求资源时，服务器除了会返回给浏览器上面说的过期时间，还会在响应头添加 Last-Modified 字段，告诉浏览器该资源的最后修改时间；然后浏览器再次请求的时候就把这个时间再通过另一个字段If-Modified-Since，发送给服务器；Last-Modified/If-Modified-Since它俩是成对的，是为了对比文件修改时间。服务器再把这两个字段的时间对比，如果是一样的，就说明文件没有被更新过，就返回状态码304（协商缓存命中）和空响应体给浏览器，浏览器直接拿过期了的资源继续使用即可；如果对比不一样说明资源有更新，就返回状态码200和新的资源。
4. 但是如果本地打开了缓存文件，即使没有对文件进行修改，也会使得 Last-Modified/If-Modified-Since 不一样，导致服务器发送相同的资源，这个时候就有了 ETag/If-None-Match 感知文件精准度更高
5. 第一次请求资源时，服务器除了会在响应头上返回Expires、Cache-Control、Last-Modified，还在返回Etag字段，表示当前资源文件的一个唯一标识。这个标识符由服务器基于文件内容编码生成，能精准感知文件的变化，只要文件内容不同，ETag就会重新生成；然后浏览器再次请求的时候就把这个文件标识 再通过另一个字段 If-None-Match，发送给服务器；对比 ETag/If-None-Match
6. ETag 生成过程中需要服务器付出额外开销，会影响服务器端的性能，所以它并不能完全替代 Last-Modified，只能作为补充和强化

总结

1. 第一次请求资源时，服务器在响应头上返回Expires、Cache-Control、Last-Modified和Etag字段。
2. Expires和Cache-Control是强缓存阶段的，强缓存最开始是使用Expires，它通过返回日期来控制缓存的时间，但是潜在的问题是如果浏器的时间和服务器的时间不一致就会产生缓存失效的问题；于是在HTTP1.1中提出了Cache-Control，Cache-Control通过返回接收到请后存储的时间来控制缓存的时间。当Expires和Cache-Control同时存在的时候，Cache-Control会优先考虑。
3. 强缓存的缺点是不管资源有没有变化，都会重新发起请求，重新获取资源。而我们希望的是在资源文件没有更新的情况下，即使过期了也不新获取资源，继续使用旧资源。所以当强缓存失效后，就会进入协商缓存。
4. Last-Modified和Etag是协商缓存阶段的，Last-Modified是记录文件最后一次修改的时间，但是有很多的缺点，如：在补课感知的时间改变了、周期性的变化以及打开文件却没有修改等，都会造成 Last-Modified修改。Etag则能精准感知文件的变化，只要文件内容不同，ETag就会重新生成。 Etag 感知文件精准度要高于Last-Modified但是Last-Modified 性能上要优于 Etag，因为 Etag 生成过程中需要服务器付出额外开销，会影响服务器端的性能，所它并不能完全替代 Last-Modified，只能作为补充和强化
5. 协商缓存一般存储：HTML；强缓存一般存储：css, image, js，文件名带上 hash

另外

强缓存和协商缓存不是由前端设置，是第一次请求资源时，服务器加在响应头返回给浏览器😁

参考

https://www.cnblogs.com/garfieldzhong/p/12498121.html?ivk_sa=1024320u