Http缓存原理和防止缓存

怼烎@ 2021-12-07 12:47 432阅读 0赞

## 浏览器参数缓存原理 ##

#### 产生缓存的条件: ####

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

#### 具体原理: ####

以范围bilibili首页为例:

1.  用户请求b站首页, 但是可以看到浏览器请求了一个名为promete-tag.json的文件(我也不知道干嘛的0.0)  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZ2VyV2luZA_size_16_color_FFFFFF_t_70]
2.  我们可以看到响应报文中的响应头参数中有ETag, 和Last-Modified参数
    
    其中ETag表示资源的唯一表示符, Last-Modified表示上次修改时间
    
    当浏览器下次再次请求这个URL的时候, 会将这两个参数带上
    
    其中If-None-Match的值为ETag的值, If-Modified-Since为Last-Modified的值
    
    浏览器之所以带上这两个参数是想表示: **我这里有promote-tag.json的缓存, 但是我不知道你服务器那里的这个文件有没有被改变**.

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZ2VyV2luZA_size_16_color_FFFFFF_t_70 1]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZ2VyV2luZA_size_16_color_FFFFFF_t_70 2]

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

#### 防止缓存 ####

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZ2VyV2luZA_size_16_color_FFFFFF_t_70]: /images/20211207/d7457e29255045789631388fce9755bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZ2VyV2luZA_size_16_color_FFFFFF_t_70 1]: /images/20211207/3f29a2e1717e44a59617e8ad93f6fbd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZ2VyV2luZA_size_16_color_FFFFFF_t_70 2]: /images/20211207/99e0a82312b045cc90f46ff44a9880df.png