协商缓存强缓存失效后，进入了请求头或者响应头中设置

可以在请求标头或响应标头中设置缓存控制，并且可以组合使用多个命令：

cache-control: public, max-age=31536000

强缓存的机制可以概括如下图

协商缓存

强缓存失败后，它将进入协商缓存阶段

浏览器在请求标头中携带缓存标识符，服务器根据缓存标识符确定是否使用缓存。如果协商后的缓存有效，则将返回304且未修改，如果失败，则将返回200和请求结果。

可以通过设置两个HTTP标头来实现协商缓存：Last-Modified和ETag

最后修改和If-修改以来

当浏览器首次访问资源时，响应头带有Last-Modified（服务器上资源的最后修改时间，最小单位s），浏览器在接收到资源后对其进行缓存。下次请求资源时，请求标头会携带If- Modified-Since。如果修改时间未更改，则使用高速缓存并返回304，否则返回新资源和200

Last-Modified: Tue, 30 Mar 2021 03:30:52 GMT

最后修改有一些缺点

ETag和If-None匹配

Etag是唯一标识符（由服务器生成），当服务器响应请求时，服务器将其返回到当前资源文件。只要资源发生更改，Etag就会重新生成。下次浏览器加载资源并将请求发送到服务器时，它将上次返回的Etag值放在请求标头中的If-None-Match中。服务器只需要将来自客户端的If-None-Match与自己的服务器进行比较。如果资源的ETag一致，则可以很好地判断资源是否相对于客户端已被修改。

如果服务器发现ETag不匹配，它将返回200和新资源（当然包括新的ETag）并将其发送给客户端；

如果ETag一致，则直接返回304，以通知客户端直接使用本地缓存。

缓存机制

强制缓存优先于协商缓存。如果强制缓存（Expires和Cache-Control）生效，则该缓存将直接使用，如果无效，则使用协商缓存（Last-Modified / If-Modified-Since和Etag / If-None）-Match），协商缓存为由服务器确定是否使用缓存。如果协商缓存无效，则表示请求的缓存无效，返回200，再次返回资源和缓存标识，并将其存储在浏览器缓存中；否则，返回0。如果生效，则返回304，继续使用缓存。具体流程图如下：

看到这一点，我不知道您是否有这样的问题：如果未设置缓存策略，浏览器会做什么？

在这种情况下，浏览器将使用启发式算法，通常将响应标头中的Date减去Last-Modified值的10％作为缓存时间。

实际方案应用程序的缓存策略不使用缓存资源1.元缓存头设置为禁止缓存

在html的head标签中添加以下内容，以防止浏览器读取缓存

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

Cache-Control作用于HTTP 1. 1语法作用于HTTP 1. 0 Expires作用于代理

但是，这样一来，浏览器无法在不修改资源的情况下加载缓存，这会极大地影响体验

2. js，css和版本号

请求js和CSS时，请在其末尾添加版本号。如果浏览器发现版本较高，则自然不会读取较低版本的缓存。版本号不需要更改文件名，只需调用对于js和css，在末尾添加？v = 1. 0，例如

custom.css?v=1.0
main.js?v=2.0

当然，版本号也可以自动添加一个随机数，但这违反了版本号的初衷，因此，在不修改资源的情况下浏览器无法加载缓存，这会影响添加版本号的体验。随机版本号。当然，使用Random函数就足够了，因此您只能在js中编写js调用语句，例如

document.write("