当前位置：首页 > article >正文

如何配置强缓存和协商缓存

article 2025/9/18 2:16:39

1.1什么是web缓存

●概念：缓存就是当我们重复操作请求数据并满足相应条件的情况下，读取存储在“存储器”中的数据。
○存储器：数据库缓存，CDN缓存，代理服务器缓存，浏览器缓存。
■数据库缓存：当web应用关系复杂,数据表蹭蹭往上涨时,可以将查询后的数据放到内存中进行缓存,下次再查询时,就直接从内存缓存中获取,从而提高响应速度。
■CDN缓存：当我们发送一个web请求时,CDN会帮我们计算去哪得到这些内容的路径短且快。这个是网站管理员部的,所以他们也可以将大家经常访问的内容放在CDN里,从而加快响应。
■代理服务器缓存：跟浏览器缓存性质类似,但是代理服务器缓存面向的群体更广,规模更大。它不只为一个用户服务,一般为大量用户提供服务,同一个副本会被重用多次因此在减少响应时间和带宽使用方面很有效。
■浏览器缓存：每个浏览器都实现了HTTP缓存,我们通过浏览器使用HTTP协议与服务器交互的时候,浏览器就会根据套与服务器约定的规则进行缓存工作。当我们在浏览器中点击前进和后退按钮时,利用的便是浏览器的缓存机制。

1.2缓存的优点、缺点

●优点
○减少请求次数，缓解服务器压力
○获取近点/本地资源，提高数据响应速度，大大提高性能
○减少带宽消耗，获取缓存数据的时候只会产生很小的网络消耗
●缺点
○获取不到最新的数据，尤其是版本迭代过程中，极有可能导致获取的资源为上一次版本的数据。

1.3缓存的方式

●强缓存
○在请求数据的时候，不会直接向服务器请求数据，而是直接从缓存中读取资源，并且返回200的状态码
●协商缓存
○当强缓存失效之后，浏览器会携带缓存标识，请求服务器，并且通过服务器返回的缓存标识判断继续使用缓存资源，还是获取最新的服务器资源
○主要有以下另种情况
■协商缓存生效，返回304
●

协商缓存生效.png

■协商缓存失效，返回200和请求结果
●

协商缓存失效.png

1.4设置强缓存的参数值
expires
○ 是HTTP1.0控制网页缓存的字段，值为一个时间戳，准确来讲是格林尼治时间，服务器返回该请求结果缓存的到期时间，意思是，再次发送请求时，如果未超过过期时间，直接使用该缓存，如果过期了则重新请求。有个缺点，就是它判断是否过期是用本地时间来判断的，本地时间是可以自己修改的。
●
Cache-Control
○是HTTP1.1中控制网页缓存的字段，当Cache-Control都存在时，Cache-Control优先级更高
● cache-control的设置值
○public：资源客户端和代理服务器都可以缓存。
○private：资源只有客户端可以缓存。
○no-cache：客户端缓存资源，但是是否缓存需要经过协商缓存来验证。
○no-store：不使用缓存。
○max-age：缓存保质期。
● 拓展
○强缓存expires和cache-control同时存在时，则cache-control会覆盖expires，expires无论有没有过期，都无效。即：cache-control优先级 > expires优先级。

1.5设置协商缓存的参数据

●last-modified（精确到秒）
○返回最后一次修改服务器资源文件的时间。
●if-modified-since
○If-Modified-Since则是客户端再次发起该请求时，携带上次请求返回的Last-Modified值。通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求，发现请求头含有If-Modified-Since字段，则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比，若服务器的资源最后被修改时间大于If-Modified-Since的字段值，则重新返回资源，状态码为200；否则则返回304，代表资源无更新，可继续使用缓存文件。
●etag：每个文件唯一的标识
○为什么存在etag
■etag实在HTTP1.1中有介绍主要的作用是用来给(css file, image, javascript file)文件后面添加一个唯一的参数
■解决last-modified无法解决的问题，它更加准确的知道文件是否被修改，因为if-modifie-since都是秒级计算的，假如在一秒内修改多次，那么使用last-modified就会有误差，而Etag可以综合Inode，MTime和Size，可以避免这个问题。
●if-none-match
○是客户端再次发起该请求时，携带上次请求返回的唯一标识Etag值。（和If-Modified-Since的作用雷同，区别在于 if-none-match是携带etag字段标识）
●拓展
○Etag和Last-Modified同时存在时，则Etag会覆盖Last-Modified，Last-Modified不会生效。即：ETag优先级 > Last-Modified优先级。
○总结：Cache-Control>Expires>Etag>Last-Modified

彻底弄懂强缓存与协商缓存

2.1刷新对于强缓存和协商缓存的影响

1 当ctrl+f5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存。
2 当f5刷新网页时，跳过强缓存，但是会检查协商缓存。
3 浏览器地址栏中写入URL，回车浏览器发现缓存中有这个文件了，不用继续请求了，直接去缓存拿。（最快）

2.2如何清除浏览器缓存

● 2.2.1meta标签

● 2.2.2请求中设置相应的参数

config.headers["If-Modified-Since"] = "5"config.headers["Cache-Control"]= "no-cache"

请求拦截设置.png

● 2.2.3在请求文件中直接时间戳
○https://app.lianxiaowei.com?t=20221106
● 2.2.3 nginx代理配置

server {listen       80;server_name  test.exmaple.cn;location / {if ($request_filename ~* .*\.(?:htm|html)$)  ## 配置页面不缓存html和htm结尾的文件{add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";}root /web/;index index.html;try_files $uri $uri/ /index.html =404;}
}

● 2.2.4 物理清除缓存

问题

为什么资源文件设置了hash，还是导致页面存在缓存？

拓展

1. 为什么资源使用了hash，页面还是存在缓存

nginx不缓存html文件 - mdnice 墨滴

每次版本更新contentHash确实为我们的cjs、css生成了与上次版本不一样的文件名，并由webpack将这些文件自动注入到我们的index.html中。问题来了，index.html事实上也是被缓存的，我们两次版本事实上都是同一个index.html,那么两次被加载的chunk文件名并没有发生变化。

假设原来的版本1.0的一个chunk文件名是：<chunk-4cb2a638.22e8ca85.js> 版本2.0是<chunk-4af2a696.22e8ca85.js>,那么版本1的文件已经被缓存了，版本2肯定因为没有发生过请求没被缓存，但index.html也被缓存；那么这时（版本2.0发布后)刷新浏览器我们会发现我们的修改居然没生效！这时，我们作为开发者，很容易就会想到去清除浏览器的缓存，但是用户不答应啊，用户未必懂得，所以作者之前没少被用户直接找上门狠狠吐槽。因此，我们不能让index.html被浏览器缓存，以保证每次刷新都会去重新请求服务端拿到最新的index.html。

2. CND解析原理