美文网首页
浏览器缓存

浏览器缓存

作者: 卿东望 | 来源:发表于2022-01-06 23:01 被阅读0次

浏览器缓存机制的全过程:

  1. 客户端向服务器首次发送请求时,服务器返回状态码为200的资源文件,并在响应头中回传资源缓存字段。
  2. 下一次请求时,由于强制缓存优先级高,先比较本地时间与上一次返回状态码为200的时间,其差值在cache-control的属性max-age范围内,则说明缓存没有过期,命中强制缓存,返回本地缓存的资源,结束本次请求。
  3. 若缓存过期了,则强制缓存没有被命中,开始协商缓存。发送请求头带有if-none-matchif-Modified-Since的请求。
  4. 服务器收到请求后,首先会通过Etag判断所请求的资源是否发生了变动,若两者一致,则返回状态码为304的响应数据,告诉客户端资源未改动,可以使用;若不一致,则返回新资源并带上新的Etag
  5. 若服务器收到请求后,发现没有Etag,则拿last-modified-sice与所请求资源文件的最后修改时间做比较,若两者一致,则返回状态码为304的响应数据;若不一致,则返回新资源,并带上新的last-modified
浏览器缓存流程图

强制缓存和协商缓存有什么区别?

强制缓存不用向服务器发送请求,而协商缓存需要向服务器发送一次请求,来确认所请求的资源文件是否发生了变动。

强制缓存是如何判断资源是否过期的呢?

有两种方式确认缓存的资源是否过期:Expirescache-control

Expires是缓存资源到期时间,它是一个绝对值,当客户端时间大于这个值,则说明资源已过期。用Expires判断资源是否过期有一个问题,那就是客户端的时间不准确时,会影响强制缓存的命中。

为了解决Expires存在的问题,HTTP1.1引入了cache-control,如果当前时间与上一次请求返回状态码为200的时间的差值在cache-control的属性max-age范围内,则说明缓存没有过期,并命中强制缓存。

协商缓存也有两种方式判断资源是否变动。

一种方式就是Etag。首次请求资源时,响应头中会带有Etag属性,Etag是所请求资源的唯一标识符。下一次请求时,请求头中会带有if-none-match属性,其属性值就是Etag的值,服务器收到请求后,会对if-none-match与当前资源的Etag的值进行比较,若一致,则返回状态码为304的请求响应;若不一致,则返回最新资源,并在响应头中回传最新的Etag值。

若没有Etag,服务器会用last-modified来判断资源是否改动。由此请求时,服务器在响应头中回传last-modified这个属性,属性值为服务器最近一次资源修改的时间;下一次请求时,请求头中会带有last-modified-since属性,属性值就是上一次资源请求成功时响应头中last-modified的值。服务器接收到请求后,会对last-modified-since和当前资源修改时间进行比较,若一致,则返回状态码为304的请求响应;若不一致,则返回最新资源,并在响应头中带有最新的last-modified

手动刷新:F5 + 刷新按钮、强制刷新:crtl + F5、回车刷新有什么区别?

手动刷新:强制缓存无效,协商缓存有效。
强制刷新:强制缓存和协商缓存均无效。
回车刷新:按正常流程请求资源。

相关文章

  • 浏览器缓存(http缓存)

    浏览器缓存有两种:强制缓存和协商缓存 浏览器缓存机制 浏览器发送请求,会先从浏览器缓存中查找【请求结果】和【缓存标...

  • 缓存、cookie、token、session、localSto

    一、缓存分类 服务器端缓存(CDN缓存) 客户端缓存(浏览器缓存); 二、浏览器缓存 强缓存:浏览器在加载资源时,...

  • 协商缓存和强缓存

    浏览器缓存主要有两类:缓存协商和彻底缓存,也有称之为协商缓存和强缓存 浏览器缓存机制浏览器缓存(Brower Ca...

  • DSBD

    1.浏览器缓存 浏览器每次发起请求,都会先在浏览器缓存中查找该请求的结果以及缓存标识 强制缓存优先于协商缓存进...

  • HTTP缓存机制

    web缓存分为:数据库缓存、服务器缓存(代理服务器、cdn缓存)、浏览器缓存浏览器缓存分为:http缓存、inde...

  • HTTP 缓存控制

    Web 缓存 数据库缓存、服务器端缓存(代理服务器缓存、CDN 缓存)、浏览器(HTTP)缓存 浏览器缓存(本地储...

  • Web浏览器的缓存机制

    原文转载【Web缓存机制系列】2 – Web浏览器的缓存机制 浏览器端的缓存规则 对于浏览器端的缓存来讲,这些规则...

  • 浏览器缓存?优点?清除方法?

    ☆前端优化:浏览器缓存技术介绍 - 简书 浏览器缓存(适用于前端解决缓存问题) - 简书 js清除浏览器缓存问题的...

  • 浏览器缓存

    浏览器缓存 浏览器处理网页的方式 走到协商缓存会返回 304 走到强缓存会返回 200 合理使用浏览器缓存 页面连...

  • 《白帽子讲web扫描》笔记

    2.9 DNS本地缓存 DNS本地缓存:一是浏览器缓存,二是系统缓存。在浏览器访问域名时优先访问浏览器缓存,一旦未...

网友评论

      本文标题:浏览器缓存

      本文链接:https://www.haomeiwen.com/subject/rplrcrtx.html