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

参考：

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页面里

[html] view plain copy

<%
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>"添加过期，则页面不过期

[html] view plain copy

<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消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

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

浏览器缓存机制（强制缓存，协商缓存）
浏览器缓存机制(强制缓存,协商缓存) 1. 强制缓存 (1)Expires (2)Cache-Control 2. 协商缓存 (1)Last-Modified / If-Modified-Since ...
浏览器缓存机制介绍与缓存策略剖析
缓存可以减少网络 IO 消耗,提高访问速度.浏览器缓存是一种操作简单.效果显著的前端性能优化手段.对于这个操作的必要性,Chrome 官方给出的解释似乎更有说服力一些: 通过网络获取内容既速度缓慢又开 ...
hibernate mysql缓存机制_Hibernate的缓存机制
面试常问到的问题: 首先说下hibernate缓存的作用(即为什么要用缓存机制),然后再具体说说Hibernate中缓存分类情况,最后可以举例: Hibernate缓存的作用: Hibernate是一 ...
Http缓存机制（强缓存与协商缓存）及过程
一.为什么要缓存: 可以减少网络请求的次数和数量,降低网络延迟,加速页面加载,提高用户体验等二.缓存机制:强缓存优先级高于协商缓存强制缓存:服务器端认为请求资源应该被缓存,则在响应头部设置cach ...
MyBatis缓存机制之一级缓存
MyBatis缓存机制之一级缓存前言 MyBatis内部封装了JDBC,简化了加载驱动.创建连接.创建statement等繁杂的过程,是我们常见的持久性框架.缓存是在计算机内存中保存的临时数据,读取 ...
浏览器缓存机制，强缓存，弱缓存
目录 web缓存类型浏览器缓存规则: 浏览器缓存的控制 cache-control总结 Expires Last-modified & If-modified-since Etag & ...
彻底理解浏览器的缓存机制（http缓存机制）
一.概述浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,所以在分析浏览器缓存机制之前,我们先使用图文简单介绍一下HTTP报文,HTTP报文分为两种: 同步s ...
浏览器缓存机制（HTTP缓存机制）
不废话,直接上干货,配图+解说首先浏览器首次请求一个网站,网站除了会返回我们需要资源,同时也会返回一些标识信息,这些标识信息约定了客户端和服务端的一些操作,这里列举重要的: 1.cache-cont ...
Mybatis(五) 延迟加载和缓存机制(一级二级缓存)
踏踏实实踏踏实实,开开心心,开心是一天不开心也是一天,路漫漫其修远兮. --WZY 一.延迟加载延迟加载就是懒加载,先去查询主表信息,如果用到从表的数据的话,再去查询从表的信息,也就是如果没用到从表 ...

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

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

最新文章

热门文章