一张图来了解浏览器缓存机制

2021年05月12日作者:井井客来源:井井客整理

感觉说不太清,所以画了一张流程图。图比文字可能更清晰~

接下很久之前的文章:简单了解HTTP,终于把http缓存的知识给补上了。

流程图

首先上流程图:

schedule简单流程

然后再来解释一下。

说明

在一个网页发起请求并获取结果的过程中,可能会有3个角色参与其中,分别是:网页、浏览器、服务器。为什么说可能,因为如果浏览器发现请求命中强缓存,则浏览器会直接拿缓存结果返回给网页。

如何让浏览器不命中强缓存呢?可以通过设置http头信息中的强缓存字段(如:Cache-Control、Expires),让它始终过期(例如设置过期时间无限小,浏览器自己就能判断过期与否)。

当浏览器发现有缓存,同时强缓存字段过期时,会携带缓存标识,向服务器发起请求。服务器接收缓存标识会判断头信息中的协商缓存字段(如:Last-Modified、If-Modified-Since、ETag、If-None-Match)来判断缓存数据是否需要更新。

当服务器发现缓存数据未过期,不需要更新时,会返回请求结果(状态码304),但不返回响应数据。浏览器发现是304则会直接会缓存中返回结果给网页。

而当服务器发现缓存数据过期,会返回请求结果(状态码200、响应头)、响应数据。浏览器会将响应头中的缓存标识及请求结果存入缓存,同时返回给网页。

其实当第一次请求时,浏览器也会将响应头中的缓存标识及请求结果存入缓存。强缓存和协商缓存的讨论基础也就是在发生过请求,有缓存数据的情况下才进行的。

补充

另外补充两点。

(1)ctrl + F5强制刷新网页时,浏览器不会判断是否有缓存,直接向服务器发起请求。这次就和第一次网页请求资源逻辑一致。

(2)F5刷新网页时,浏览器会判断是否有缓存,当有缓存时,不判断强缓存是否命中,会携带缓存标识向服务器发起请求,由服务器判断缓存是否过期。

内容差不多就是这样的~

文章TAG:http

本文标题:一张图来了解浏览器缓存机制
本文链接:http://www.jingjingke.com/c/12375.html

上一篇:TBS Studio调试微信公众号
下一篇:微信小程序帐号冻结后找回