浏览器缓存机制小结

原文地址: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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞