浏览器缓存机制及一些缓存问题解决方法

参考：

http://bbs.csdn.net/topics/330028896  浏览器缓存机制

http://www.docin.com/p-591569918.html  浏览器缓存的一些问题的处理方法

1.google Chrome 缓存 一般在 ...\AppData\Local\Google\Chrome\User Data\Default\Cache

2.Firefox浏览器缓存文件夹地址：

    在firefox地址栏输入about:cache,会显示缓存的文件夹地址，有两个， 一般为...\AppData\Local\Mozilla\Firefox\Profiles\m0awsqac.default\Cache       与...\AppData\Local\Mozilla\Firefox\Profiles\m0awsqac.default\Cache2

第一部分：浏览器访问机制

浏览器访问机制，到底是先访问浏览器的缓存还是先访问服务器

1. last-modified/Etag

Last-Mondified: 最后一次修改时间 
Etag: 资源的状态唯一标识(每个资源的etag都不同,例如img,js,css。。。。) 
Expires: 指定资源在浏览器缓存中的过期时间 (需要在服务端设定) 

如果响应HEAD 没有expire，只有last-modified/Etag，则浏览器访问资源机制如下：

第一次请求URL：

url请求->访问服务器->服务器按请求处理返回数据及响应->浏览器接收到服务器信息，将资源缓存在本地目录中，同时保存文件的响应信息如last-modified/Etag等

第二次请求相同URL：

url请求（浏览器会像服务器发送if-modified-since与if-none-match报头，实际为第一次请求的last-modified与tag）> 访问服务器该资源是否在时间内没被修改过->若无，服务器返回304（not modified）,数据内容为空->浏览器自动从缓存目录中读取资源

小结：使用Last-Modified/Etag 可以减少传输成本，但不会减少http请求 

2.文件加上expire

浏览器会先检查缓存中的文件，没有过期，就直接使用缓存中的文件，从而不会发送http请求，只会请求一次主文档

注： 浏览器一般性加载文件顺序   js-> css -> 图片，（多个js或css 按照顺序加载）

(以下测试数据来自互联网) 
[22:13:32.947] HTML Start 
[22:13:32.947] normal inline script run time 
[22:13:34.904] normal external script run time 
[22:13:35.775] [body] normal external script run time 
[22:13:35.789] [body end] normal external script run time 
[22:13:35.789] HTML End 
[22:13:35.791] deferred inline script run time 
[22:13:35.791] deferred external script run time 
[22:13:35.793] DOMContentLoaded 
[22:13:38.144] images[0] onload 
[22:13:38.328] images[1] onload 
[22:13:39.105] images[2] onload 
[22:13:39.105] images[3] onload 
[22:13:39.106] window.onload 

第二部分：一些浏览器缓存问题的解决方案

1.GET请求缓存处理，不想要缓存GET请求？

浏览器会缓存GET请求，不会缓存POST请求，因此解决为：

方法1：GET请求URL后加随机数，让服务器认为是不同的请求，如："http://www.example.com/index.jsp?class=articele&page=5&t"+new Date().getTime();

方法2：在ajax发送请求前加上xmlHttpRequest.setRequestHeader("If-modified-since","0");

方法3：在ajax发送请求前加上xmlHttpRequest.setRequestHeader("Cache-Control","no-cache");

方法4：若为jquery ajax, 设置ajax属性cache:false;(注意：cache属性对post没有用，对get才有用)

方法5：在服务器端响应请求时加上response.setHeader("Cache-Control","no-cache,must-revalidate");

方法6：使用POST代替GET,浏览器不会对POST做缓存

注意：为什么cache属性对post没有用，对get才有用？

因为1.浏览器缓存url请求原理就是判断url是否相同，url相同则读取缓存，url不相同则读取服务器

2.使用GET方式提交url类似"http://www.example.com/index.jsp?class=articele&page=5“，而POST方式提交url类似http://www.example.com/index.jsp，参数是在请求  head里的，不在url上，请求参数url始终相同

3.jquery ajax GET方式提交： data: "t=" + new Date().getTime(),  或者 data:{"t": new Date().getTime()}或者cash:false都是在请求后面加上不同的参数，cach:false会启动 生成参数附加在url请求里，因此浏览器认为是不同的请求，就重新请求服务器

2.防止JSP动态页面内容被缓存？

方法：在JSP页面里

<%
response.setHeader("expires","sat,6 May 1995 12:00:00 GMT");//将expire时间设置为一个过去时间或0，-1等
response.setHeader("cache-control","no-store,no-cache,must-revalidadate");//设置HTTP/1.1 cache-control头
response.addHeader("cache-control", "post-check=0,pre-check=0");//设置IE 扩展HTTP/1.1 no-cache header
response.setHeader("Pragma", "no-cache");//设置标准HTTP/1.0 no-cache header
%>

2.防止html页面被缓存？（jsp也适用）

方法：html页面里

注意：

1.若在jsp页面里"<%response%>"添加页面过期 + "<meta http-equiv>"添加不过期，则页面过期

2.若在jsp页面里"<%response%>"添加页面不过期 + "<meta http-equiv>"添加过期，则页面不过期

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

3.cache-control参数说明：

a.max-age=""指示客户机可以接受生存期小于指定时间的响应，以s为单位，在max-age规定的秒数内，浏览器将不会发送对应的请求到服务器，数据由缓存直接返回，超过这一时间段才进一步由服务器决定是返回新数据还是仍由缓存提供。

b.public 指示响应可被任何缓存区缓存；

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

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

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

f.min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应；当前时间加上指定时间内，浏览器不会发送消息到服务器

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