一、协议缓存

http协议缓存机制是指通过 HTTP 协议头里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段来控制文件缓存的机制。

Cache-Control用于控制文件在本地缓存有效时长。最常见的，比如服务器回包：Cache-Control:max-age=600 表示文件在本地应该缓存，且有效时长是600秒（从发出请求算起）。在接下来600秒内，如果有请求这个资源，浏览器不会发出 HTTP 请求，而是直接使用本地缓存的文件。

Last-Modified是标识文件在服务器上的最新更新时间。下次请求时，如果文件缓存过期，浏览器通过 If-Modified-Since 字段带上这个时间，发送给服务器，由服务器比较时间戳来判断文件是否有修改。如果没有修改，服务器返回304告诉浏览器继续使用缓存；如果有修改，则返回200，同时返回最新的文件。

Cache-Control 通常与 Last-Modified 一起使用。一个用于控制缓存有效时间，一个在缓存失效后，向服务查询是否有更新。

Cache-Control 还有一个同功能的字段：Expires。Expires 的值一个绝对的时间点，如：Expires: Thu, 10 Nov 2015 08:45:11 GMT，表示在这个时间点之前，缓存都是有效的。

Expires 是 HTTP1.0 标准中的字段，Cache-Control 是 HTTP1.1 标准中新加的字段，功能一样，都是控制缓存的有效时间。当这两个字段同时出现时，Cache-Control 是高优化级的。

方法一 修改请求header头：

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); 

header("Cache-Control: no-cache, must-revalidate"); 

header("Pragma: no-cache");

方法二 修改html的head块： 

<META HTTP-EQUIV="pragma" CONTENT="no-cache">;

<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">

<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

<META HTTP-EQUIV="expires" CONTENT="0">

方法三：添加随机参数：

对于图片或者css，可使用如下方式：

<img src="./data/avatar_mingpian_bak.jpg?rand=h9xqeI"  width="156" height="98">

对于js则可以直接使用时间戳：

<script src="./data/home.jpg?rand=h9xqeI"></script>

二、应用缓存

浏览器除了在第一次访问 Web 应用时缓存资源外，只会在 cache manifest 文件本身发生变化时更新缓存。而 cache manifest 中的资源文件发生变化并不会触发更新。

CACHE MANIFEST 

# 上一行是必须书写 

images/sound-icon.png

# 下面是另一些需要缓存的资源，在这个示例中只有一个 css 文件。 

CACHE: 

style/default.css 

FALLBACK: 

/files/projects /projects