浏览器缓存机制分析与前端缓存清理
发布时间： 2018-06-03 16:56、
浏览次数： 857
正文主题：组织浏览器缓存机制的内部逻辑，提供避免浏览器缓存的相关解决方案
我相信很多初学者在前端发布页面时，会出现页面已经更新，但浏览器浏览页面不会发生变化的问题，那么如何解决这个问题呢？
其实，这个问题在各种搜索引擎上搜索后有很多方案，但并不一定有效。 常见的解决方案有以下两种。 1 :添加时间戳； 2 )2:缓存控制。
首先，在所有静态资源文件之后添加随机时间戳。 例如，如果页面使用test.js，请将html页面中的test.js引用更改为
每次更改test.js时，都会更改version后面的时间戳，以便浏览器忽略缓存并向服务器请求新文件。 但是，如果真的这么做了，为什么所有更改的文件都在应用时添加时间戳，但页面缓存却没有被清除呢？ 理由很简单。 你只是在更改的文件中添加了时间戳，但html页面本身此时已经更改。 html页面是所有静态资源的载体，如果不添加时间戳，所有其他APP应用程序都将使用旧缓存。 因此，此时要禁用缓存，只需向访问的网站添加时间戳即可。 例如，http://www.test.com version=123456。
但是，显然这种做法其实并不优雅。 例如，不能频繁更改网站的访问地址。 所以，这种方法在实际使用中有很大的限制。 接下来是第二种方法，缓存控制。
在许多网络教程中，您会看到将cache-control添加到元标记中，如下所示
但是，这样做，对鸡蛋没有帮助。 这样就无法避免浏览器缓存。 添加缓存控制是毫无疑问的，但必须添加到响应标头中。 所有客户端和服务端的交互都使用http协议，从服务端返回到客户端的数据称为响应数据，包括响应头(
Headers (和响应体)响应
Body )，响应标头通常用于指导您如何向浏览器呈现数据。 例如，编码、解码、压缩和请求是否可以跨域操作。 Cache-Control是其中之一，指导您如何管理缓存。 接下来，我们将详细介绍浏览器缓存机制，并首先查看流程图，了解如何通过响应标头控制浏览器缓存
此图像是浏览器访问具有缓存的页面时的决策流程。 大致的流程是这样的。 访问wydhxc以前访问的页面时，浏览器会首先检查本地缓存的过期时间，如果未过期，则直接访问本地缓存，不再从服务器端获取。 此时的状态代码为200(from )
che )如果过期，则向服务端发送http请求，检查两个标记之一、Etag或Last-Modified，并询问浏览器资源是否过期。 如果未过期，浏览器将返回304状态代码。 这意味着浏览器不会重新下载文件，而是保留缓存的内容，但如果服务器此时检测到资源已过期，则浏览器将返回304状态代码，而不是Etag和last-modidion Etag是服务端对不同文件使用固定算法生成的唯一混列，当文件修改时，该唯一混列将发生变化。 “Last-Modified”实际上可以理解，他存储的是文件的最后修改时间，两者都可以用于确定当前文件是否发生了变化。
接下来，我们将介绍如何使用响应标头指示浏览器缓存时间和何时发送查询请求以查询资源过期时间。 其中涉及两个响应标头
1 .快速
Expires用于指导浏览器缓存文件的时间。 具体形式大概是这样的。 Expires:
从此时开始，缓存过期的服务器将重新发送确认请求。 无效日期(如0 )表示过去的日期，表示资源已过期。 举个例子，Expires: Wed，
2018oct201807336028336000GMT表示，到这个时间为止，浏览器没有向服务器发送请求，而是一直挪用本地缓存。 这里有一点必须注意。 如果
缓存控制
设置了响应头
命令“max-age”或“s-max-age”将忽略Expires标头
2 .缓存控制
简而言之，Cache-Control知道浏览器何时向浏览器确认当前资源的过期时间，具有以下选项
缓存控制3360最大恢复日期
Cache-control: no-cache
Cache-control :否- store
缓存控制： no-transform
缓存控制：公共
缓存控制：隐私
高速缓存控制3360代理验证
Cache-Contr
ol: max-age=Cache-control: s-maxage=
以下是对指令的详细解释
must-revalidate
缓存必须在使用之前验证旧资源的状态，并且不可使用过期资源。
public表明响应可以被任何对象(包括：发送请求的客户端，代理服务器，等等)缓存。
private表明响应只能被单个用户缓存，不能作为共享缓存(即代理服务器不能缓存它)。
no-cache
在释放缓存副本之前，强制高速缓存将请求提交给原始服务器进行验证
max-age=设置缓存存储的最大周期，超过这个时间缓存被认为过期(单位秒)。与Expires相反，时间是相对于请求的时间。
s-maxage=覆盖max-age 或者 Expires 头，但是仅适用于共享缓存(比如各个代理)，并且私有缓存中它被忽略。
no-store缓存不应存储有关客户端请求或服务器响应的任何内容。
no-transform不得对资源进行转换或转变。Content-Encoding, Content-Range,
Content-Type等HTTP头不能由代理修改。例如，非透明代理可以对图像格式进行转换，以便节省缓存空间或者减少缓慢链路上的流量。
no-transform指令不允许这样做。
其中，默认的是private，通常配置比较常用的是no-cache，no-store，max-age，no-cache表示浏览器每次都必须发送查询请求，询问当前资源是否过期，如果过期，则返回304，否则放回新资源，no-store则不发生询问，直接获取最新的资源，max-age与expires不同，他的时间是相对于请求的时间，会覆盖expires中的设定
所以到了这里，读者应该大体上知道要怎么控制缓存了，比较明智的做法是expires跟cache-control进行搭配使用，根据项目本身的更新周期，例如一周内不会更新，那么expires可以配置为一周后的日期，那么这段时间内，访问网页的时候，都不会发生http请求，都会直接读取浏览器的缓存，这样响应速度将会大大提高。cache-control可以设置为no-cache，这样在资源过期之后，浏览器每次加载资源的时候会询问服务器当前资源是否过期，非过期资源将会继续沿用缓存，虽然发生了http请求，但是不用重新下载数据，这样性能依旧可以保持相对较高的水准。
这个时候，有可能有人会发问，响应头要怎么添加，都说了叫响应头了，那就是服务端的事了，这部分前端是无法控制的，这个需要在服务器或者各种代理服务器上进行配置，这个写下来又是一篇长长的文章，这里就不再赘述了
参考资料：
Cache-Control
http缓存
Expires