js css img等静态资源禁用缓存的方法以及思考

问题:

  1. js,css引入时,浏览器首次加载后会缓存文件,避免重复下载,但服务器发新版本后并不会重新下载,需要用户清缓存
  2. img是服务器根据参数实时生成的,需要重复下载

解决:

使用get参数即 ?param='value' 的形式避免使用缓存

js可以使用?version='' 发新版本时变更版本号

img使用日期+随机数,保存重复获取

思考

If-Modified-Since是标准的HTTP请求头标签,在发送HTTP请求时,把浏览器端缓存页面的最后修改时间一起发到服务器去,服务器会把这个时间与服务器上实际文件的最后修改时间进行比较。

  如果时间一致,那么返回HTTP状态码304(不返回文件内容),客户端接到之后,就直接把本地缓存文件显示到浏览器中。

  如果时间不一致,就返回HTTP状态码200和新的文件内容,客户端接到之后,会丢弃旧文件,把新文件缓存起来,并显示到浏览器中。

200 OK (from cache) 是浏览器没有跟服务器确认,直接用了浏览器缓存;

304 Not Modified 是浏览器和服务器多确认了一次缓存有效性,再用的缓存。

Expires:即在 HTTP 头中指明具体失效的时间,如

Max-age:在 HTTP 头中按秒指定失效的时间,如下图。好处是不像方法 1 一样需要定时检查是否过期,一旦过期就需要指定新的时间,坏处是只有 HTTP/1.1 支持

https://www.bokeyy.com/post/200-ok-from-cache-vs-304-not-modified.html 这里有具体介绍,没深入理解,有空可以看看