——IT唐伯虎
摘要：浏览器缓存的解决方案，包括传统前端和现代前端。
前言：本文只针对文件请求（html、css、js）进行分析，但不涉及json数据请求。
浏览器的状态
（1）当浏览器向服务器发起请求，如果请求正常，状态是200。
（2）浏览器接收到请求结果后，如果会根据响应头设置的缓存规则，把请求结果存起来。
（3）当浏览器再次发起相同的请求的时候，浏览器会先向服务器比对文件，只对比最后修改时间，如果最后修改时间变化就重新获取请求结果，此时状态是200；如果最后修改时间没有变化则从缓存读，此时状态是304。
（4）304状态是比较理想的缓存使用方案，但是往往来说，浏览器会走另一条粗暴的路线，即不进行时间比对，直接从缓存读，此时状态是200已缓存。
（200）> （304） > （200已缓存）
（10ms）>（5ms）> （0ms）
浏览器的刷新
（1）按F5刷新：
从缓存读取文件，然后将这些文件向服务器对比，如果最后修改时间变化就重新下载，此时状态是200，如果没变就从缓存读，此时状态是304，这是只理想情况，有些时候，只从缓存读取，状态是200已缓存。
（2）按ctrl+F5强制刷新：
强制删除当前页面的所有缓存，并且重新下载，此时状态是200。
（3）手动清除浏览器所有缓存：
强制删除浏览器的所有缓存，访问的时候重新下载，此时状态是200。
（4）在页面上点击链接、或者在地址栏输入、或者从浏览器书签进入，等等的大多数途径，
浏览器只从缓存读取，此时状态是200已缓存。
综上所述，需要清缓存的情况是第4点，其次是第1点的后半段。
改进方案
（1）css、js
这两种资源是由html指定调用的，只要html里指定的css、js链接变化了，浏览器就会加载新的css、js。
传统前端的方案是手动加版本号
<link href="css/style.css?v=${code}">
<script src="js/front.js?v=${code}"></script>
${code}代表版本号，由freemarker或jsp进行赋值，如果版本号变化了，整个网站的所有css、js都会重新下载。
现代前端的方案是自动加版本号
app.a7dec7ac.js
chunk-4a91bce9.b219889e.css
这种方案依赖于webpack、gulp等打包工具，打包结果自带了hash值，这些hash值是根据文件的最后修改时间生成的，如果文件没改过，名字就不会变化，这种方案控制缓存更为精确。
（2）html
在css、js加上版本控制之后，已经能避开大多数情况下的缓存，但由于css、js是由html指定调用的，所以说，如果html被缓存了，浏览器依旧会去调用旧的css、js。其中，上文“浏览器的刷新”第4点就会走这条路线。
html的文件名是跟浏览器的地址相关的。html文件名是什么，用户在浏览器就需要输入什么。所以说，不能给html文件加上版本号。对于html文件，我们采取禁用缓存的方案：
传统前端，在后端给需要的html加上响应头
response.addHeader("Cache-Control", "no-cache, no-store");
现代前端，在nginx给index.html加上响应头
location = /index.html {
add_header Cache-Control "no-cache, no-store";
}
原文地址：https://www.cnblogs.com/liangweiping/p/11791961.html