01月19, 2018

浏览器缓存

很久没有更新博客,一直都觉得没有什么可写的。每次学习新东西,看别人的文章当时明白了,可是过了一段时间就忘了。所以打算以后自己写一些总结的文章。

本篇文章,主要是总结一下浏览器缓存的相关知识。

http头

与浏览器缓存相关的http头,主要包括一下几个:

  • Pragma
  • Cache-Control
  • Expires
  • Date
  • Last-Modified
  • If-Unmodified-Since
  • If-Modified-Since
  • ETag
  • If-Match
  • If-None-Match
  • Vary

简单说一下这几个头的常见几个用法。

Pragma

它是HTTP1.0时代的产物,在需要向后兼容的情况下可能会使用

Pragma: no-cache
// 等价于
Cache-Control: no-cache

Cache-Control

常用的值有:

Cache-control: no-cache   // 强制提交校验请求到源服务器
Cache-control: no-store // 缓存不应该存储客户端请求和服务响应的任何内容
Cache-control: must-revalidate // 缓存必须必须核实旧资源的状态,且不可使用过期资源
Cache-Control: max-age=<seconds> // 缓存的最大时间,相对于请求时间计算

no-cacheno-store的主要区别是,no-store会直接从服务器下载新的资源,而no-cache会通过ETag等先校验再决定是否下载新资源。

Expires

指定一个过期时间,设置了max-ages-max-age 指令的Cache-Control响应头,则会忽略该值

Date

请求响应的时间,如果设置了Cache-Control: max-age则会通过与Date的值相加与当前时间作比较,来判断资源有没有过期。

Last-ModifiedIf-Unmodified-SinceIf-Modified-Since

校验资源是否修改。文件只要重新保存,Last-Modified的值就会更新,精度比ETag低,所以是一个备用机制。

ETagIf-MatchIf-None-Match

同样是校验资源是否修改。ETag通常是通过某种算法(例如MD5)计算出文件的唯一值,文件内容没有修改时,ETag的值不会变。缺点是,生成ETag值需要消耗一定的资源。

Vary

Vary响应头列出了一个响应字段列表,告诉缓存服务器遇到同一个 URL 对应着不同版本文档的情况时,如何缓存和筛选合适的版本。具体可以看这篇文章

既然有这么多的缓存相关的http头,那肯定就有一个优先级。简单来说,浏览器判断缓存的优先级如下:

Pragma > Cache-control:max-age  >  Expires  >  ETag  >  Last-Modified

强缓存和协商缓存

我们多次刷新一个页面,可以看到network中,成功获取的资源状态主要分为三种是200200 from disk cache200 from memory cache304

200是直接从服务器获取资源。

200 from disk cache200 from memory cache就是走的强缓存,此时浏览器没有像服务器发送任何请求,直接从内存中取出资源。这时候命中的情况就是浏览器缓存了资源,并且没有过期(ExpiresCache-control:max-age)。

304走的是协商缓存,浏览器会向服务器发送请求,通过ETagLast-Modified时间来校验资源有没有失效,没有失效则返回304

参考资料

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=en#cache-control

本文链接:https://www.imliutao.com/post/cache.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。