浏览器的缓存机制

 先记录一下最常用的图片缓存法, 修改httpd.ini文件 把 mod_expires和mod_headers模块前面的注释取消掉。

<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 300 seconds"
ExpiresByType text/css "access plus 1 months"
ExpiresByType text/javascript "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/jpg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
EXpiresByType application/x-shockwave-flash "access plus 1 months"
EXpiresByType application/x-javascript      "access plus 1 months"
ExpiresByType video/x-flv "access plus 1 months"
</IfModule>

Cache-Control

Cache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求 / 响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令通常覆盖默认缓存算法。缓存指令是单向的，即请求中存在一个 指令并不意味着响应中将存在同一个指令。

cache-control 定义是：Cache-Control = “Cache-Control” “:” cache-directive 。表1 展示了适用的值。

表2 表明在不同的情形下，浏览器是将请求重新发送到服务器还是使用缓存的内容。

Cache-Control 是关于浏览器缓存的最重要的设置，因为它覆盖其他设置，比如 Expires 和 Last-Modified 。另外，由于浏览器的行为基本相同，这个属性是处理跨浏览器缓存问题的最有效的方法。

失效

Expires 头部字段提供一个日期和时间，响应在该日期和时间后被认为失效。失效的缓存条目通常不会被缓存（无论是 代理缓存还是用户代理缓存）返回，除非首先通过原始服务器（或者拥有该实体的最新副本的中介缓存）验证。（注意： cache-control max-age 和 s-maxage 将覆盖 Expires 头部。）

Expires 字段接收以下格式的值： “Expires: Sun, 08 Nov2009 03:37:26 GMT” 。如果查看内容时的日期在给定的日期之前，则认为该内容没有失效并从缓存中提取出来。反之，则认为该内容失效，缓存将采取一些措施。表 3-6 表明针对不同用户操作的不同浏览器的行为。

注意：所有浏览器都假定为使用默认设置运行。

Last-Modified/E-Tag

Last-Modified 实体头部字段值通常用作一个缓存验证器。简单来说，如果实体值在 Last-Modified 值之后没有被更改，则认为该缓存条目有效。 ETag 响应头部字段值是一个实体标记，它提供一个 “ 不透明 ” 的缓存验证器。这可能在以下几种情况下提供更可靠的验证：不方便存储修改日期； HTTP 日期值的 one-second 解决方案不够用；或者原始服务器希望避免由于使用修改日期而导致的某些冲突。

不同的浏览器有不同的配置行为。表 7-10 表明针对不同用户操作的不同浏览器的行为。

注意：所有浏览器都假定使用默认设置运行。

不进行任何缓存相关设置

如果您不定义任何缓存相关设置，则不同的浏览器有不同的行为。有时，同一个浏览器在相同的情形下每次运行时的行为都是不同的。情况可能很复杂。另外，有些不该缓存的内容如果被缓存，将会导致安全问题。
不同的浏览器有不同的行为。表 11 展示了不同的浏览器行为。

注意：所有浏览器都假定使用默认设置运行。

最后 , 概括下关键的结论 :

【文章2 DOMContentLoaded与 onload的区别】

1.DOMContentLoaded

DOMContentLoaded是FF,Opera 9的特有的Event, 当所有DOM解析完以后会触发这个事件。

 jquery的ready(示例:$(“selector).ready(function(){})),MT的onDomReady

 IE下是scrollleft事件可以时就表示DomcontentLoaded: var temp= document.createElement(‘div’);temp.doScroll(‘left’);

 Fired on a Window object when a document’s DOMcontent is finished loading, but unlike “load”, does not wait untilall images are loaded. Used for example by GreaseMonkey to sneak in to alterpages before they are displayed.

This event, as many others on this page, is dispatched to”trusted” targets only; for example, it is not dispatched to thecontent of the main browser object in Firefox, even if it comes from a chrome:/URI.

2.Onload

 onload要等到所有页面元素加载完成才会触发, 包括页面上image、flash、iframe等内容都加载完毕才会执行。

【文章3 HTML页面加载和解析流程】

1.用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；

2.浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件；

3.浏览器又发出CSS文件的请求，服务器返回这个CSS文件；

4.浏览器继续载入html中＜body＞部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；

5.浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；

6.服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；

7.浏览器发现了一个包含一行Javascript代码的＜script＞标签，赶快运行它；

8.Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div＞ （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；

9.终于等到了＜/html＞的到来，浏览器泪流满面……

10.等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径；

11.浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

【文章4 HTTP请求中浏览器的缓存机制】

【流程】

当资源第一次被访问的时候，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();
另一个作者写到:

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

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

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

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

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

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

来自 http://blog.csdn.net/yzhou86/article/details/6864189