浏览器缓存策略

今天的主题让我想起了过去的无知和愚蠢,不过谁不是一点点进步的了~

有一次,向开发提了一个web端的bug,回归后还是有问题,忍不住和开发妹子一起复现,才知道连F5与ctrl+F5区别都没搞清楚。

1、强缓存与协商缓存

1)强缓存

强缓存指不需要再次请求服务器,直接使用缓存的资源;

2)协商缓存

请求资源时,本地该资源的Etag 同时带到服务端,和最新资源做对比。若Etag不变则返回304,浏览器读取本地缓存;反之,返回200和最新的资源。

2、Catche-Control与Expires关系

Expires 是http1.0的参数,设置的是绝对日期时间;

Cache-Control是http1.1的参数,其中max-age设置的是相对时间,缓存内容将在xxx秒后失效;

为什么说Catche-Control比Expire优先级高呢?是因为Expire也会因为本地与服务器的时间存在误差导致不准确。

3、浏览器缓存步骤

1)当浏览器第一发送请求时,获得响应资源,此外response_header里也包括Etag与Last-Modified。

PS:Etag是资源的唯一标识符,如果它的值变动,代表资源也变动(理解为映射关系)

2)展示页面,并将页面资源与Etag与Last-Modified一起缓存。

3)第二次发送请求时,请求头里携带if-None-Match(Etag)、if-Last-Modified(Last-Modified)发送给服务器。比较Expires/Cache-Control,如果未过期则进行强缓存。再比较标识符,如果标识符改变,说明资源改变,服务器返回200和资源,并将新的内容进行缓存。反之,返回304和空响应体(协商缓存),读取之前的缓存。

图片来源于网络

PS:if-None-Match的优先级高于if-Last-Modified;因为if-Last-Modified会因为本地与服务器的时间存在误差导致不准确。

4、F5与ctrl+F5区别

1)F5

浏览器将 cache-control 的 max-age 直接设置为0,让缓存立即过期,直接走协商缓存,且服务端返回304;

2)ctrl+F5

强制刷新下,浏览器强行设置 no-cache,强制获取最新的资源, if-modified-since等其他缓存协议字段都无效。

PS:

no-cache本地可以有缓存,需要服务器验证才可以使用;

no-store 彻底得禁用缓冲,本地和代理服务器都不缓冲,每次都从服务器获取。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 今天看奇舞团推了篇文章讲缓存策略的,讲的挺不错,记录一下。 原文地址就在下面。 总结: 缓存分为强缓存和协商缓存...
    NowhereToRun阅读 4,967评论 1 7
  • 最近在对项目做 IE 11 兼容,由 IE 的缓存问题,引发我对于浏览器缓存策略的思考。 缓存类型 web缓存主要...
    丶chlorine阅读 921评论 0 1
  • 当浏览器请求一个网站的时候,会加载各种各样的资源,比如:HTML文档、图片、CSS和JS等文件。对于一些不经常变的...
    LUGY阅读 977评论 0 0
  • 浏览器对于请求资源, 流程如图所示: 可以看到浏览器的缓存机制分为两个部分: 1、当前缓存是否过期? 2、服务器中...
    zhoulujun阅读 1,283评论 0 3
  • 参考《深入理解浏览器的缓存机制》进行整理 前言 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略...
    琢磨先生lf阅读 800评论 1 1

友情链接更多精彩内容