浏览器强缓存与协商缓存

浏览器强缓存与协商缓存,第1张

主要看response headers中Cache-Control的值

Cache-Control取值含义:

private:仅浏览器可以缓存

public:浏览器和代理服务器都可以缓存

max-age=xxx 过期时间(秒)

no-cache:不进行强缓存

no-store:不强缓存也不协商缓存

触发条件:

1、Cache-Control的值为no-cache(不强缓存)

2、max-age 设置的时间导致文件过期了

ETag:每个文件都有一个,改动文件就会变(类似md5)

Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符。

Last-Modified:文件修改时间

每次http返回来response headers中都会带ETag和Last-Modefied ,下次请求时在request header就把这两个给带上但是名字有了变化(ETag->If-None-Match,Last-Modified->If-Modified-Since),服务端把带过来的标识与之前的标识进行对比 判断是否更改过了

请求资源时,把用户本地该资源的 ETag 同时带到服务端,服务端和最新资源做对比。

如果资源没更改,返回304,浏览器读取本地缓存。

如果资源有更改,返回200,返回最新的资源。

1.从服务器获取新的资源

2.命中强缓存,且资源没过期,直接读取本地缓存(请求成功 文件大小size会显示 from disk cache)

3.命中协商缓存,且资源未更改,读取本地缓存。

注意:协商缓存无论如果,都要向服务端发请求的,只不过,资源未更改时,返回的只是header信息,所以size很小;而资源有更改时,还要返回body数据,所以size会大。

可以有后端服务器配置,也可以在nginx中配置

参考链接: https://blog.csdn.net/Amnesiac666/article/details/121101165

疑问1:max-age时间是怎么来的 从什么时候开始计时

疑问2:为什么是response header中的而不是request header中

浏览器缓存策略分为两种 强缓存 (本地缓存) 和 协商缓存 (弱缓存)。

浏览器在发请求前,先检查强缓存,若没有需要的内容(未命中),则发起请求判断是否需要用弱缓存。

强缓存 是不发起请求,直接使用缓存内的内容的。浏览器将 js 、 css 、 image 、 font-family 等存到内存(存小文件)或者磁盘(存大文件)中,下次用户再访问的时候就从内存中取,以便提升性能。

协商缓存 需要往后台发请求, 通过判断来决定是使用协商缓存。如果请求内容没发生变化,则请求返回304(服务器收到请求,但内容无变化),浏览器就用缓存内的内容。

如果服务器返回的响应标头中包含 Expires (时间戳),那么客户端发起请求的时间在 Expires 之前的话,就触发强缓存。

服务器在上一次响应请求时,返回一个带 Last-Modified 的响应头,值为一个时间戳,表示该资源最后一次在服务器修改的时间。当客户端再一次请求这个资源的时候, 请求头就会带上 If-Modified-Since ,值为上次服务器发来的 Last-Modified , 服务器收到后,就和该资源最后修改时间比对, 没变化就返回304, 触发协商缓存。

弊端 : 时间间隔最小为1s,如果请求的资源在1s内发生了改变,是可能会触发协商缓存的, 导致无法获取到最新的资源。

为解决间隔最小1s的问题, If-None-Match 和 Etag 就诞生了。 Etag 是由服务器生成的, 是每个资源的唯一标识字符串, 随资源变化而改变。 判断过程和http1.0的一致,请求的时候携带 If-None-Match ,然后服务器比较这两个值,没变化就返回304, 触发协商缓存。

弊端 : 占用服务器资源较多, 虽然准确度高,但是性能上不如 Last-Modified &If-Modified-Since 的方法。不过实际的影响不会很大, 基本上可以忽略不计。

即便我们没有配置缓存策略,浏览器也会采用自己的算法来缓存资源。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/6865032.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-29
下一篇 2023-03-29

发表评论

登录后才能评论

评论列表(0条)

保存