浏览器参数缓存原理
产生缓存的条件:
- Get请求
- 请求地址不发生改变
具体原理:
以范围bilibili首页为例:
-
用户请求b站首页, 但是可以看到浏览器请求了一个名为promete-tag.json的文件(我也不知道干嘛的0.0)
-
我们可以看到响应报文中的响应头参数中有ETag, 和Last-Modified参数
其中ETag表示资源的唯一表示符, Last-Modified表示上次修改时间
当浏览器下次再次请求这个URL的时候, 会将这两个参数带上
其中If-None-Match的值为ETag的值, If-Modified-Since为Last-Modified的值
浏览器之所以带上这两个参数是想表示: 我这里有promote-tag.json的缓存, 但是我不知道你服务器那里的这个文件有没有被改变.
- 服务器接收到请求报文后, 发现请求报文头里面有If-Modified-Since,If-None-Match参数, 理解浏览器想使用缓存
于是将If-Modified-Since的值与服务器里promote-tag.json文件的Last-Modified的值相比较, 将If-Modified-Since的值与ETag的值相比较,
若两者都没有变化, 说明服务器里的promote-tag.json和浏览器缓存中的promote-tag.json文件是一致的, 于是发送响应报文给浏览器,响应报文的http状态码为304 Not Modified
如果两个参数的值不一样, 说明浏览器缓存里的文件和服务器的不一致, 于是发送http状态码为200的响应报文, 并在报文体中携带上新的promote-tag.json文件内容
- 浏览器接受到响应报文的时候,查看http请求状态码, 发现是304, 则使用自己缓存里面的文件
如果是200, 说明缓存中的文件和服务器中的不一致, 以及被修改了, 所以去响应体里面获取新的promote-tag.json文件
防止缓存
对于动态验证码这种我们不希望使用缓存的文件, 我们可以在请求的时候通过js来动态的在URL后面加上一个时间参数
function reloadCode() {
$("#img").attr("src", "gifCode?data=" + new Date() + "");
}
这样的话我们每次请求的URL都是不同的URL, 这样也就不存在缓存了.