zqy233的前端学习笔记前端部署缓存问题
为vue项目中js、css文件加上时间戳的原理
这能解决html引用的js、css等资源文件出现缓存的问题。
确保在每次构建时文件的 URL 发生变化，从而防止使用缓存的旧文件。
实际上前端脚手架vue-cli、vite等一般支持更改文件内容后，相应文件打包后的文件名中hash值会产生变化，同时间戳是一个道理，很多时候是index.html出现缓存，这种情况即使加上时间戳也并没有效果，需要后端配置。
为vue项目中js、css文件加上时间戳不能解决index.html出现缓存
为vue项目中js、css文件加上时间戳，发现还是存在缓存问题，这往往是由于index.htm文件在服务器端存在缓存。
即使资源文件 URL 发生变化，但html请求的还是旧的html。
这就需要服务器端进行nginx配置来解决，让index.html不缓存：两个选择no-cache浏览器会缓存，但刷新页面或者重新打开时。 会请求服务器，服务器可以响应304，如果文件有改动就会响应200 。no-store浏览器不缓存，刷新页面需要重新下载页面。
只配置不缓存html，js,css等文件不做处理，是因为前端某个js或css有更新，会自动在文件名上加哈希值，这样一发新版时，只要客户端请求了新版的html，就会自动找到新的js、css，没有更新的js、css还会继续用缓存，这样既不会太大的影响网页的访问速度，也能保证更新的代码不走缓存。
缓存一个HTML页面时，页面引用的资源被更新或删除了会怎样？
从结果上看，是会缓存之前旧的引用资源，不会出现报错，所以从这一点上看，缓存html也会缓存页面引用的其他资源，例如 CSS、JavaScript 文件等。
HTML 页面中使用 <meta> 标签能完全关闭缓存吗？
在index.html中加入了这几行代码：
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
Cache-control 和 Pragma 是用于设置缓存策略的，而 Expires 是用于设置过期时间的。
参考issues：https://github.com/ant-design/ant-design-pro/issues/1365
在浏览器中，默认会对 html css js 等静态文件、以及重定向进行缓存，如果在HEAD头中指定：
<HEAD>
<METAHTTP-EQUIV="Pragma"CONTENT="no-cache">
<METAHTTP-EQUIV="Cache-Control"CONTENT="no-cache">
<METAHTTP-EQUIV="Expires"CONTENT="0">
</HEAD>
<HEAD>
<METAHTTP-EQUIV="Pragma"CONTENT="no-cache">
<METAHTTP-EQUIV="Cache-Control"CONTENT="no-cache">
<METAHTTP-EQUIV="Expires"CONTENT="0">
</HEAD>
浏览器不会缓存html，但是还是会对重定向缓存，并且这种方式并不规范，可能有的浏览器不支持。
以下是gpt的回答，待验证正确性：
在 HTML 页面中使用 <meta> 标签设置缓存策略可以影响浏览器的缓存行为，但并不能完全关闭缓存，而且其优先级通常较低于服务器端设置的头部信息。
然而，需要注意的是，这些设置在实际应用中的效果可能会因浏览器的具体实现而有所不同。一些浏览器可能会遵循这些设置，而另一些可能会忽略它们。此外，由于这些设置是在 HTML 页面内部进行的，用户可以通过修改页面内容来绕过这些设置。
为了更可靠地控制缓存，最好的做法是在服务器端设置相应的响应头部，如 Cache-Control、Expires、Pragma 等。服务器端设置的头部信息通常具有更高的优先级，并更可靠地影响浏览器的缓存行为。
使用 <meta> 标签设置缓存策略可以向浏览器发送一些建议，但不能完全关闭浏览器的缓存。具体而言，以下是一些因素：
- 优先级问题： 在设置缓存时，浏览器会考虑来自不同来源的头部信息的优先级。通常情况下，服务器端设置的缓存头部信息优先级更高。如果服务器设置了强制缓存的头部信息，浏览器通常会遵循这些设置而忽略
<meta>标签的建议。 - HTML 页面已经被缓存： HTML 页面已经被缓存，则新添加的
<meta>标签则并不能立刻生效，仍需要清缓存。 - 不适用于所有浏览器： 不同的浏览器可能对
<meta>标签的缓存设置有不同的实现，有些浏览器可能会忽略这些设置。因此，为了确保最佳的兼容性和可靠性，最好在服务器端设置缓存策略。
总的来说，虽然使用 <meta> 标签可以提供一些控制浏览器缓存的能力，但为了更可靠地管理缓存，特别是在生产环境中，建议在服务器端配置适当的缓存头部信息。
应用场景
后端没有配置响应头的缓存策略时，不建议使用，流量请求大，影响网页速度
缓存策略是由后端/服务器端控制的
浏览器缓存分为强缓存和协商缓存
强缓存
强缓存是通过设置响应头中的 Expires 或 Cache-Control 来实现的，这两个字段可以告诉浏览器在一定时间内直接使用本地缓存，而不向服务器发送请求
可以由这两个字段其中一个决定
expirescache-control(优先级更高)
cache-control是http1.1的头字段，expires是http1.0的头字段,如果expires和cache-control同时存在，cache-control会覆盖expires，建议两个都写。
在时效时间内，不走服务端，只走本地缓存
协商缓存
浏览器向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；
可以由这两对字段中的一对决定
Last-Modified，If-Modified-SinceEtag，If-None-Match(优先级更高)
参考文章：揭秘浏览器的默认缓存行为
浏览器存在默认缓存行为，任何资源会被默认缓存，用不用缓存取决于服务端和前端共同决定。
即便给html文件设置强缓存，也不会生效，每次请求都会请求服务端以确保html文件是最新的。
在http1.1版本中，给某资源响应头Cache-Control的值设置为no-store，可以禁止浏览器缓存该资源。