浏览器缓存机制浅析（一）

【流程】

当资源第一次被访问的时候，HTTP头部如下

(Request-Line)  GET /a.html HTTP/1.1

Host    127.0.0.1

User-Agent  Mozilla/5.0 (X11; U; Linux i686;zh-CN;rv:1.9.0.15) Gecko/2009102815 Ubuntu/9.04 (jaunty) Firefox/3.0.15

Accept             text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language     zh-cn,zh;q=0.5

Accept-Encoding     gzip,deflate

Accept-Charset     gb2312,utf-8;q=0.7,;q=0.7

Keep-Alive         300

Connection         keep-alive

HTTP返回头部如下

(Status-Line)      HTTP/1.1 200 OK

Date               Thu, 26 Nov 2009 13:50:54 GMT

Server             Apache/2.2.11 (Unix) PHP/5.2.9

Last-Modified       Thu, 26Nov 2009 13:50:19 GMT

Etag               "8fb8b-14-4794674acdcc0"

Accept-Ranges       bytes

Content-Length      20

Keep-Alive         timeout=5, max=100

Connection         Keep-Alive

Content-Type       text/html

当资源第一次被访问的时候，http返回200的状态码，并在头部携带上当前资源的一些描述信息，如

Last-Modified      // 指示最后修改的时间

Etag               // 指示资源的状态唯一标识

Expires            // 指示资源在浏览器缓存中的过期时间

接着浏览器会将文件缓存到Cache目录下，并同时保存文件的上述信息

当第二次请求该文件时，浏览器会先检查Cache目录下是否含有该文件，如果有，并且还没到Expires设置的时间，即文件还没有过期，那么此时浏览器将直接从Cache目录中读取文件，而不再发送请求

如果文件此时已经过期，则浏览器会发送一次HTTP请求到WebServer，并在头部携带上当前文件的如下信息

If-Modified-Since   Thu, 26 Nov 2009 13:50:19GMT

If-None-Match      "8fb8b-14-4794674acdcc0"

即把上一次修改的时间，以及上一次请求返回的Etag值一起发送给服务器。服务器在接收到这个请求的时候，先解析Header里头的信息，然后校验该头部信息。

如果该文件从上次时间到现在都没有过修改或者Etag信息没有变化，则服务端将直接返回一个304的状态，而不再返回文件资源，状态头部如下

(Status-Line)      HTTP/1.1 304 Not Modified

Date               Thu, 26 Nov 2009 14:09:07 GMT

Server             Apache/2.2.11 (Unix) PHP/5.2.9

Connection         Keep-Alive

Keep-Alive         timeout=5, max=100

Etag               "8fb8b-14-4794674acdcc0"

这样，就能够很大程度上减少网络带宽以及提升用户的浏览器体验。

当然，如果服务器经过匹配发现文件修改过了，就会将文件资源返回，并带上新文件状态信息。

 

【基本字段】

Pragma

Pragma头域用来包含实现特定的指令，最常用的是Pragma:no-cache。在HTTP/1.1协议中，它的含义和Cache- Control:no-cache相同。

Expires

文件在本地缓存的过期时间，如果浏览器发现缓存中的文件没有过期，则不发送请求（有例外，后面介绍）

Cache-Control

Cache -Control指定请求和响应遵循的缓存机制。

在请求消息或响应消息中设置 Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括

no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached

响应消息中的指令包括

public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age

各个消息中的指令含义如下：

1. Public指示响应可被任何缓存区缓存。

2. Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。

3. no-cache指示请求或响应消息不能缓存

4. no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

5. max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。

6. min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应。

7. max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

Etag/If-None-Match

一对验证文件实体的标记 “Entity Tag”的响应/请求头Apache中，ETag的值，默认是对文件的索引节（INode），大小（Size）和最后修改时间（MTime）进行Hash后得到的

Last-Modified/If-Modified-Since

一对验证文件的修改时间的响应/请求头

Expires、Cache-Control、Last-Modified、ETag是RFC2616（HTTP/1.1）协议中和网页缓存相关的几个字段。

前两个用来控制缓存的失效日期，浏览器可通过它来判定，需不需要发出HTTP请求；

后两个用来验证网页的有效性，服务器端利用它来验证这个文件是否需要重新返回

Last-ModifiedVS Etag

既然有了Last-Modified，为什么还要用ETag字段呢？因为如果在一秒钟之内对一个文件进行两次更改，Last-Modified就会不正确。因此，HTTP/1.1利用Entity Tag头提供了更加严格的验证。

 

【不同的情况】

上面描述的是一个普通的浏览器缓存状态，在实际应用中，如页面跳转（点击页面链接跳转，window.open，在地址栏敲回车，刷新页面）等操作，会有一些区别

普通页面跳转

普通页面跳转包括链接点击跳转，用js脚本打开新页面（window.open）

无缓存情况下，请求会返回所有资源结果

设置Expires并且未过期时，浏览器将不会发出http请求

如果Expires过期，则会发送相应请求，并附带上Last-Modifed等信息，供服务器校验

页面刷新(F5)

这种情况一下，一般会看到很多304的请求，就是说即便资源设置了Expires且未过期，浏览器也会发送相应请求

IE和FF稍有区别

IE:

If-Modified-Since   Wed, 18 Nov 2009 15:54:52GMT

If-None-Match   "2360492659"

Pragma: no-cache    // 禁止缓存

FF:

If-Modified-Since   Wed, 18 Nov 2009 15:54:52GMT

If-None-Match   "2360492659"

Cache-Control   max-age=0  // 文件立即过期

强制刷新(Ctrl+F5)

效果和无缓存时候一致，返回200的结果

一些特殊的资源

IFRAME

 

我有一个主页面包含iframe框架，iframe加载一个ajax操作json的页面。当第一次打开这个主页面的时候，iframe中页面读取json数据是最新的，当数据库中修改了数据再刷新主页面的时候，iframe中页面的数据没有从数据库中取得最新的数据。这类问题，在FF中的解决方法可以参考How to get iframe not to cache in IE这篇文章，即在页面的head部分加上以下语句:

<META http-equiv="Expires" content="Mon, 26 Jul 1997 05:00:00 GMT">
<META http-equiv="Last-Modified" content="Sat, 10 Nov 1997 09:08:07 GMT">
<META http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">
<META http-equiv="Pragma" content="no-cache">

但在IE中无效。IE中解决iFrame缓存问题的方法有两种：

(1) 每次主页面刷新时随机更换iframe的name;

(2) 每次主页面刷新时在iframe的src路径页面赋予一个随机get参数，例如：

<iframe src="http://www.example.com/thepage.html" name="aframe"></iframe>
<script type="text/javascript">
    document.frames['aframe'].location.href += (document.frames['aframe'].location.href.indexOf("?") != -1 ? "?" : "&") + (new Date()).getTime();
</script>

FLASH

 

使用以下的方法，使SWF文件强制不从浏览器读本地的缓存。或强制其SWF文件每次都去 读取最新的媒体文件

确保每次都读取最新的SWF文件。

1：使用"Expires"标头 这是在HTML文件中告诉浏览器不读取本地缓存
在<head> </head> 中间加以下代码
<!-- BEGIN INSERT --> 
<META HTTP-EQUIV="Expires" CONTENT="Mon, 04 Dec 1999 21:29:02 GMT">
<!-- END INSERT -->
这样的话，每次访问这个文件都会告诉浏览器其缓存版本过期，将重新从服务器端读取最新的文件

2：直接告诉浏览器根本就没有缓存
在包含SWF文件的HTML页面里的</body>插入：
<!-- BEGIN INSERT -->

<HEAD>
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
</HEAD>

<!-- END INSERT -->
没有Cache标头 不支持IE5版本，所以微软建议使用带Cacahe控制标头

3：当在HTML页面间连接跳转时
在点击超连接时将强制其从服务器上下载最新文档而不是从本地缓存中浏览

例如：
<A HREF="stockPrices.htm?1">Current stock prices</A>

以上方法将阻止读取本地缓存

如何阻止从缓存中读取加载变量

问题：
当从外部数据源加载数据时，有时浏览器将数据存贮在本地缓存中，这样就导致
在调用loadVariables方法加载数据时会从本地缓存中读取数据而代替从原始数据
读取的信息。

解决：
为确保flash加载的是最新的变量，附加一个随机数变量，这样就可以原始档中加载最新的数据

例如：
方法一：
loadVariables("mypage.asp?nocache=" + random(65000), 0, "POST");

方法二：
loadVariables("mypage.asp?nocache=" + getTimer(), 0, "POST");

这样确保每次加载的数据是最新的.

 

 

异步获取的数据(AJAX)

 

项目有时要用一些Ajax的效果，因为比较简单，也就没有去用什么Ajax.net之类的东西，手写代码也就实现了。、

第二天，有人向我报告错误；说是只有第一次读取的值正常，后面的值都不正常；我调试了一下 ，确实有这样的问题，查出是因为AJAX缓存的问题：解决办法有如下几种:

      1、在服务端加 header("Cache-Control: no-cache, must-revalidate");(如php中)

　　2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0");

　　3、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache");

　　4、在 Ajax 的 URL 参数后加上 "?fresh=" + Math.random(); //当然这里参数 fresh 可以任意取了

　　5、第五种方法和第四种类似，在 URL 参数后加上 "?timestamp=" + new Date().getTime();

　　6、用POST替代GET：不推荐

 

1、加个随机数
      xmlHttp.open("GET", "ajax.asp?now=" + new Date().getTime(), true);

2、在要异步获取的asp页面中写一段禁止缓存的代码：
      Response.Buffer =True
      Response.ExpiresAbsolute =Now() - 1
      Response.Expires=0
      Response.CacheControl="no-cache"

3、在ajax发送请求前加上xmlHTTP.setRequestHeader("If-Modified-Since","0");可以禁止缓存
      xmlHTTP.open("get", URL, true); 
      xmlHTTP.onreadystatechange = callHTML; 
      xmlHTTP.setRequestHeader("If-Modified-Since","0"); 
      xmlHTTP.send();

另一个作者写到:

AJAX的缓存是由浏览器维持的，对于发向服务器的某个url，ajax仅在第一次请求时与服务器交互信息，之后的请求中，ajax不再向服务器提交请求，而是直接从缓存中提取数据。

有些情况下，我们需要每一次都从服务器得到更新后数据。思路是让每次请求的url都不同，而又不影响正常应用：在url之后加入随机内容。
e.g.
url=url+"&"+Math.random();

Key points:
1.每次请求的url都不一样（ajax的缓存便不起作用）
2.不影响正常应用（最基本的）

----------------
方法二：（未经证实）
在JSP中禁止缓存
response.addHeader("Cache-Control", "no-cache");
response.addHeader("Expires", "Thu, 01 Jan 1970 00:00:01 GMT"); 

HTTP:
<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">

另一个作者写到:

我们都知道，ajax能提高页面载入的速度的主要原因是通过ajax减少了重复数据的载入，真正做到按需获取，既然如此，我们在写ajax程序的时候不妨送佛送到西，在客户端再做一次缓存,进一步提高数据载入速度。那就是在载入数据的同时将数据缓存在浏览器内存中，一旦数据被载入，只要页面未刷新，该数据就永远的缓存在内存中，当用户再次查看该数据时，则不需要从服务器上去获取数据，极大的降低了服务器的负载和提高了用户的体验。

 

 

【三种刷新方式对缓存的区别】

众所周知浏览器是通过Last-Modified和Expires来处理缓存的，具体机制就不做解释，而在具体调试中发现并不按我们想象的方式进行，其原因很有可能是在刷新浏览器的时候采用不恰当的方式导致。对于大多数浏览器而言，都包含有三种刷新方式，以下我们以IE浏览器为例：

F5 刷新
Ctrl+F5 刷新
“转至”或地址栏里回车 刷新

这些快捷键的功能，主流浏览器都是相同的。
而这三种刷新方式会导致浏览器采取不同的缓存机制：

F5：不允许浏览器直接使用本地缓存，因此Last-Modified能起作用，但Expires无效
Ctrl+F5：是强制刷新，因此缓存机制失效
“转至”或地址栏里回车：正常的访问，Last-Modified和Expires都有效

知道浏览器刷新还有这么一回事后，那么以后在项目调试的过程中就不会感到疑惑了。