HTTP缓存及如何禁用

其中cache-control与expires均为http1.1支持项，而pragma则为http1.0支持项。三者所表达的意义是一样的，而且在现代浏览器中均完美支持。但是三者的优先级均小于http头文件。

禁用http缓存

在钉钉端或Electron中，页面可能因为http缓存导致加载js报错
通常解决办法是禁用http缓存

HTML中禁用缓存

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

Electron禁用缓存

# 禁用http缓存 https://www.electronjs.org/zh/docs/latest/api/command-line-switches#--disable-http-cache
app.commandLine.appendSwitch('--disable-http-cache')

Pragma

在 HTTP/1.0 中规定的通用首部，这个首部的效果依赖于不同的实现，所以在“请求-响应”链中可能会有不同的效果。它用来向后兼容只支持 HTTP/1.0 协议的缓存服务器，那时候 HTTP/1.1 协议中的 Cache-Control 还没有出来。

Expires

Expires 响应头包含日期/时间， 即在此时候之后，响应过期。

无效的日期，比如 0, 代表着过去的日期，即该资源已经过期。

如果在Cache-Control响应头设置了 “max-age” 或者 “s-max-age” 指令，那么 Expires 头会被忽略。

Cache-Control

Cache-Control 通用消息头字段，被用于在http请求和响应中，通过指定指令来实现缓存机制。缓存指令是单向的，这意味着在请求中设置的指令，不一定被包含在响应中。

缓存请求指令

# 客户端
Cache-Control: max-age=<seconds>
Cache-Control: max-stale[=<seconds>]
Cache-Control: min-fresh=<seconds>
Cache-control: no-cache
Cache-control: no-store
Cache-control: no-transform
Cache-control: only-if-cached

# 服务端
Cache-control: must-revalidate
Cache-control: no-cache
Cache-control: no-store
Cache-control: no-transform
Cache-control: public
Cache-control: private
Cache-control: proxy-revalidate
Cache-Control: max-age=<seconds>
Cache-control: s-maxage=<seconds>

请求流程

客户端从服务器请求数据需要经历如下基本步骤:
1、如果请求命中本地缓存则从本地缓存中获取一个对应资源的”copy”；
2、检查这个”copy”是否fresh,是则直接返回，否则继续向服务器转发请求。
3、服务器接收到请求，然后判断资源是否变更，是则返回新内容，否则返回304，未变更。
4、客户端更新本地缓存。

no-cache：

强制客户端跳过步骤2，直接向服务器发送请求。也就是说每次请求都必须向服务器发送。

must-revalidate:

作用与no-cache相同，但更严格，强制意味更明显。但这只是理论上的描述，根据我在ff6上的测试，它几乎不起作用，只要请求的频率加快到一定程度，服务器就接收不到请求。

no-store:

缓存将不存储response，包括header和body。测试结果表明，除每次请求都必发送到服务器外，响应代码均是200，且request并没有发送”If-Modified-Since”和”If-None-Match”头，这意味着缓存的确没有存储response。

扩展阅读

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control