web cache 机制 （cache-control）

什么是cache?

cache理所应当就是缓存，缓存能提升我们网站应用的性能，这是毋庸置疑的。那么HTTP协议是如何支持CACHE机制的？

我们一起来探索下。

 

首先是http协议头里的原文（w3c cache）

 

这篇说明大概总结如下：

客户端访问一个http请求的时候，先确认客户端缓存是否有这个entry，有，则校验其可用性（比如过期时间，id等），若有效，则直接返回客户端；cache中没有此entry，则请求服务端。

 

HTTP协议是如何保证这个流程的？

可以看 cache-control 这个http header，cache-control是http/1.1中的内容，兼容http/1.0 的pragma

 

cache-control 常用的属性有

 max-age 和 no-cache

具体写法如下：

<META HTTP-EQUIV="Cache-Control" CONTENT="max-age=0" />

 <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache" />

上述代码的意思是：

第一行： 永远过期，每次请求都必须和服务器交互，max-age的单位是秒

第二行： 客户端不cache

 PS max-age 的优先级是高于http 的expires头的优先级的，也就是说设置了max-age会覆盖expires头的过期时间。如果服务端cache-control和expires都没有设置，根据http协议客户端会自动计算一个过期时间。

 

当客户端发起一个http请求的时候，客户端确认这个缓存存在且有效，那么就直接返回缓存的内容。那么如何判定一个缓存是否有效呢？

校验的规则可以有很多，现有常见的校验的字段为

1. last-modified
2. ETag（entity tag）
3. IF-MODIFIED-SINCE
4. IF-UNMODIFIED-SINCE

校验分为强校验和弱校验。

强校验指当实体（请求的对象）改变的时候，相关的校验器也随着改变；否则称之为弱校验。

 

我们拿Etag举例子;

当客户端发送一个请求，请求头里有个字段为ETag =1，当服务端接收到这个请求的时候，解析出这个ETag为1，服务端和本地的这个请求实体的ETag比较，如果相同那么返回304，否则返回新的实体。

这就是整一个校验过程。

 

知道了这个原则，我们做应用的时候就要注意以下两点：

1. cache所有能cache的资源，并且能cache多久cache多久
2. 不cache html

那这样会出现另一个问题：当请求时体改变的时候，客户端不能得到实时的更新。

 

所以我的解决方案如下：

1. 给所有的静态资源（除了html资源和动态资源）加上cache，并附上版本号，web服务器（apche|nginx）设置cache过期时间为永久。
2. 所有的html 不cache <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache" />
   
   

<script type="text/javascript" src="a.js?v=1" ></script>

评论

1 楼 qdujunjie 2016-01-20  

楼主我有个问题，静态资源设置cache-control是可以进行cache的，但是动态资源，例如php，就算服务器端的返回正确设置了cache-control为max-age=10000，客户端浏览器马上访问，还是会去请求server端，这是为什么呢？

是因为不能缓存动态资源吗？？？

回复我邮件也可以：[e-mail]