web| 配置 http 的 header 使用缓存

javaDEMO

本网站记录了最全的各种 JavaDEMO ,保证下载,复制就是可用的,包括基础的, 集合的, spring 的, Mybatis 的等等各种,助力你从菜鸟到大牛,记得收藏哦~~
https://www.javastudy.cloud

http 请求 header 使用缓存总述

请求分为 request 和 response 这两个部分,每个部分都可以设置 header 来进行一些约束,如我们常用的请求类型(POST,GET),返回值类型(JSON)等等,同样对于缓存,也可以在 header 里面进行约定.当浏览器请求资源时,就会按照 header 里面的信息,去决定是使用缓存还是重新请求资源.

验证 header 控制缓存

通常,我们可以在 request 的 header 中声明不要缓存, 在 response 的 header 中声明这个资源可以缓存,即可以缓存的时间
在本 demo 中,我们以 nginx 做静态资源服务器为基础去修改 header,nginx 做静态资源服务器参考文章: https://www.javastudy.cloud/articles/2019/11/16/1573895620157.html

通过 Last-Modified 和 ETag 做缓存

一.第一次请求

二.第二次请求
然后我们刷新下

返回值是 304,说明没有直正从服务器获取资源,从图二的请求头中我们可以看到,
If-Modified-Since: time
If-None-Match: eId
如果自从 time 时间之后有修改,且修改之后的文件的 Id 和 eId 不相等,则重新请求资源

通过 cache-control 来控制缓存

我们修改下 Nginx 配置文件,使其在返回资源时,加上一个 cache-control 的 header,配置如下所示:
一.第一次请求如下图所示

二. 50 秒之内,我们对地址栏进行,可以看到 transferred 是 cache,Response 中的 Date 值没有变
然后文件的信息都未修改

三,50 秒之后,我们对地址栏再回车,可以看到如下图所示
transferred 还是 cache,也就是还是走的缓存,
但要注意状态码是 304!!!
Response 中的 Date 值也更新了!!!!
说明 Cache-control 的作用已过,现在走的是 Last-Modified 和 ETag 这两个 header 的作用,也就是我们上一段的说明

DEMO 总评

浏览器缓存是万里缓存的第一关,做好了浏览器缓存,能把静态资源如 js,css, html , 图片等请求在浏览器层面就解决掉,可大幅减少后台服务器的压力,特别是有些同学刚开始买云服务器,都是买的带宽 1M 的,如能用好浏览器缓存,打开速度也是杠杠的! 加油吧,少年!