Http缓存原理和防止缓存

浏览器参数缓存原理

产生缓存的条件:

1. Get请求
2. 请求地址不发生改变

具体原理:

以范围bilibili首页为例:

1. 用户请求b站首页, 但是可以看到浏览器请求了一个名为promete-tag.json的文件(我也不知道干嘛的0.0)
   

2. 我们可以看到响应报文中的响应头参数中有ETag, 和Last-Modified参数

   其中ETag表示资源的唯一表示符, Last-Modified表示上次修改时间

   当浏览器下次再次请求这个URL的时候, 会将这两个参数带上

   其中If-None-Match的值为ETag的值, If-Modified-Since为Last-Modified的值

   浏览器之所以带上这两个参数是想表示: 我这里有promote-tag.json的缓存, 但是我不知道你服务器那里的这个文件有没有被改变.

3. 服务器接收到请求报文后, 发现请求报文头里面有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文件内容

4. 浏览器接受到响应报文的时候,查看http请求状态码, 发现是304, 则使用自己缓存里面的文件
   如果是200, 说明缓存中的文件和服务器中的不一致, 以及被修改了, 所以去响应体里面获取新的promote-tag.json文件

防止缓存

对于动态验证码这种我们不希望使用缓存的文件, 我们可以在请求的时候通过js来动态的在URL后面加上一个时间参数

function reloadCode() {
    $("#img").attr("src", "gifCode?data=" + new Date() + "");
}

这样的话我们每次请求的URL都是不同的URL, 这样也就不存在缓存了.