浏览器缓存机制

缓存:

https://zhuanlan.zhihu.com/p/25038231
1.
Web 缓存主要通过 Headers 来传递信息。

让浏览器来确定缓存是否有效,而浏览器能够依赖的只有上次请求时服务器端留给它的资源存活时间。expires cache-control: max-age=93312000,这就是告诉浏览器这个资源的生存时间

2.我们不能把存活时间设成永远,因为可能什么时候我们会更新资源,但隔一段时间重新请求一次并没有改变的资源同样浪费带宽。所以我们必须要有让服务器告诉浏览器缓存仍然有效的方法,那便是 304 Not Modified。

在服务器端判断缓存仍然有效时将会返回状态码 304 的响应。

那么服务器如何判断浏览器持有的缓存是否有效呢?这就需要浏览器将一些信息传递给服务器。


https://github.com/chenjiangsong/blog/issues/1 输入chrome://view-http-cache/,可以看到chrome所有的缓存文件

1.浏览器缓存类型
1)强缓存:不会向服务器发送请求,直接从缓存中读取资源,在chrome控制台的network选项中可以看到该请求返回200的状态码,并且size显示from disk cache或from memory cache;

2)协商缓存:向服务器发送请求,服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存,如果命中,则返回304状态码并带上新的response header通知浏览器从缓存中读取资源;

两者的共同点是,都是从客户端缓存中读取资源;区别是强缓存不会发请求,协商缓存会发请求。


2.浏览器缓存过程
1)//第一次发送请求
浏览器第一次发送请求,服务器返回200,
浏览器把资源文件从服务器上请求并下载下来,同时把response header及该请求的返回时间一并缓存

2)//下一次根据max-age决定是否发送请求 /////优先Cache-control ,其次expires
下一次请求该资源时,先比较当前时间和上一次返回200时的时间差,
如果未超过cache-control设置的max-age,则没有过期,命中强缓存,(不支持Http1.1时,用expires判断是否过期)
如果超过,则向服务器发送 header 带有 If-None-Match和If-modified-since的请求 //If-None-Match存的response header返回的Etag, If-modified-since代表responseheader的Last-Modified

3)//发送了请求后服务器的回应:协商缓存还是新的资源文件 //////////优先Etag,其次Last-Modified
服务器返回304:服务器收到请求后,根据Etag值判断被请求文件是否修改,如果Etag值一致则没有修改,命中协商缓存
返回200:直接新的资源文件,并且带上新的Etag值(Etag由服务器生成)
(如果收到的请求没有Etag,也就是没有If-None-Match,则会利用Last-Modified,即If-modified-since)

三、用户行为对浏览器缓存的控制
地址栏访问,链接跳转是正常用户行为,将会触发浏览器缓存机制;

F5刷新,浏览器会设置max-age=0,跳过强缓存判断,会进行协商缓存判断;//即向服务器发送请求。返回304或200

ctrl+F5刷新,跳过强缓存和协商缓存,直接从服务器拉取资源。 //返回的是200

原文地址:https://www.cnblogs.com/yyzyxy/p/8690243.html