为了账号安全,请及时绑定邮箱和手机立即绑定

浏览器缓存机制小结

标签:
Html/CSS

原文地址:justrockit.top

web性能优化措施中,合理设置浏览器缓存是重要的优化手段之一,它可以加快页面访问速度和节省用户网络带宽等。

简单介绍下相关概念。

Expires 和 Cache-Control

Expires出自HTTP1.0,Cache-Control出自HTTP1.1,同时设置两者时,Cache-Control 会覆盖 Expires。

Expires

Expires指定的是实际过期日期而不是秒数。但Expires存在一些问题,如服务器时间不同步或不准确。所以最好使用剩余秒数而不是绝对时间来表达过期时间。

Cache-Control

Cache-Control可设置max-age值,单位秒,指定缓存过期时间。如:Cache-Control: max-age=3600。

ETag 和 Last-Modified

ETag 和 Last-Modified都由服务器返回在response headers中,其中ETag的优先级比Last-Modified高,也就是说服务器会优先判断ETag的值。

ETag

ETag是附加到文档上的任意标签,可能是文档的序列号或版本号,或者是文档内容的校验等。当文档改变时ETag值也会随之改变。与ETag相关的是 If-None-Match,当浏览器发起请求时,会在If-None-Match字段携带ETag的值发给服务器;

Last-Modified

Last-Modified是文档在服务器端最后被修改的时间。与Last-Modified相关的是If-Modified-Since,当浏览器发起请求时,会在If-Modified-Since字段携带Last-Modified的值发送给服务器。

强缓存和协商缓存

强缓存

与强缓存有关的是 Expires 和 Cache-Control,若还在设定的时间范围内,则命中强缓存,浏览器不会向服务器发起请求,直接读取本地缓存。它的返回码是200,在控制台network的size栏可以看到form disk cache或from memory cache。

协商缓存

与协商缓存有关的是 ETag 和 Last-Modified,当服务器收到If-None-Match字段和If-Modified-Since字段携带的信息后。若匹配成功,则命中协商缓存,服务器返回304 Not Modified;若匹配不成功,服务器返回200和新的资源。

如何配置浏览器缓存

  • 在web服务器的返回响应中添加Expires和Cache-Control;

  • 在nginx或apache的配置文件中配置Expires和Cache-Control。

小结

  • 缓存的类型强缓存协商缓存。两者区别是,强缓存不会向服务器发请求,而协商缓存会发请求,匹配成功返回304 Not Modified,匹配不成功返回200;

  • 浏览器会先校验强缓存,若强缓存未命中,再进行协商缓存校验。

  • ETag的优先级高于Last-Modified,因此协商缓存中服务器会优先判断ETag的值;

  • F5刷新,会跳过强缓存校验,直接进行协商缓存校验;Ctrl+F5刷新,会跳过强缓存和协商缓存校验,直接向服务器请求数据。



作者:__MYSTERY
链接:https://www.jianshu.com/p/d83361607cd8


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消