江苏龙网

  1. 主页 > 生活百科 > >

一文搞懂浏览器缓存机制( 二 )

小知识

  1. 校验值（验证机制）：服务器返回资源的时候有时在控制头信息带上这个资源的实体标签Etag（Entity Tag） ， 它可以用来作为浏览器再次请求过程的校验标识 。如过发现校验标识不匹配 ， 说明资源已经被修改或过期 ， 浏览器需求重新获取资源内容 。
2.2 浏览器缓存的控制
2.2.1 使用HTML的 Meta 标签
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">上述代码的作用是告诉浏览器当前页面不被缓存 ， 每次访问都需要去服务器拉取 。使用上很简单 ， 但只有部分浏览器可以支持 ， 而且所有缓存代理服务器都不支持 ， 因为代理不解析HTML内容本身 。可以通过这个页面测试你的浏览器是否支持：[Pragma No-Cache Test] (http://www.procata.com/cachetest/tests/pragma/index.php) 。
2.2.2 使用缓存有关的HTTP消息报头
一个URI的完整HTTP协议交互过程是由HTTP请求和HTTP响应组成的 。有关HTTP详细内容可参考《Hypertext Transfer Protocol — HTTP/1.1》、《HTTP协议详解》等 。
在HTTP请求和响应的消息报头中 ， 常见的与缓存有关的消息报头有：
一文搞懂浏览器缓存机制

文章插图
 
稍微解释一下：
1. Cache-Control
  1. max-age（单位为s）指定设置缓存最大的有效时间 ， 定义的是时间长短 。当浏览器向服务器发送请求后 ， 在max-age这段时间里浏览器就不会再向服务器发送请求了 。我们来找个资源看下 。比如QQ推广上的css资源 ， max-age=3600 ， 也就是说缓存有效期为3600秒（也就是1h） 。于是在1天内都会使用这个版本的资源 ， 即使服务器上的资源发生了变化 ， 浏览器也不会得到通知 。max-age会覆盖掉Expires ， 后面会有讨论

一文搞懂浏览器缓存机制

文章插图
 
  1.  
  2. s-maxage（单位为s）同max-age ， 只用于共享缓存（比如CDN缓存） 。比如 ， 当s-maxage=60时 ， 在这60秒中 ， 即使更新了CDN的内容 ， 浏览器也不会进行请求 。也就是说max-age用于普通缓存 ， 而s-maxage用于代理缓存 。如果存在s-maxage ， 则会覆盖掉max-age和Expires header 。
  3. public 指定响应会被缓存 ， 并且在多用户间共享 。也就是下图的意思 。如果没有指定public还是private ， 则默认为public 。

一文搞懂浏览器缓存机制

文章插图
 
  1.  
  2. private 响应只作为私有的缓存（见下图） ， 不能在用户间共享 。如果要求HTTP认证 ， 响应会自动设置为 private

一文搞懂浏览器缓存机制

文章插图
 
  1.  
  2. no-cache 指定不缓存响应 ， 表明资源不进行缓存 ， 但是设置了 no-cache 之后并不代表浏览器不缓存 ， 而是在获取缓存前要向服务器确认资源是否被更改 。因此有的时候只设置 no-cache 防止缓存还是不够保险 ， 还可以加上 private 指令 ， 将过期时间设为过去的时间 。
  3. no-store 绝对禁止缓存 ， 一看就知道如果用了这个命令当然就是不会进行缓存啦～每次请求资源都要从服务器重新获取 。
  4. must-revalidate 指定如果页面是过期的 ， 则去服务器进行获取 。这个指令并不常用 ， 就不做过多的讨论了 。
cache-control的种类这么多 ， 然而怎么使用它们呢 ， 参看下图：
一文搞懂浏览器缓存机制

文章插图
 
2. Expires
缓存过期时间 ， 用来指定资源到期的时间 ， 是服务器端的具体的时间点 。也就是说 ， Expires=max-age + 请求时间  ， 需要和Last-modified结合使用 。但在上面我们提到过 ， cache-control的优先级更高 。Expires是Web服务器响应消息头字段 ， 在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据 ， 而无需再次请求 。
一文搞懂浏览器缓存机制

文章插图
 
3. Last-modified & If-modified-since
【一文搞懂浏览器缓存机制】


推荐阅读


上一篇：修身茶

下一篇：科学煮水冲水之道