<安彦>主流浏览器缓存机制

一、方向
1.了解HTTP协议
2.了解浏览器的缓存机制
3.主流浏览器文件及图片的缓存机制

二、基础知识
1.什么是HTTP协议？
协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器。
2.HTTP消息的结构
Request的消息结构分为三部分，第一部分叫请求行，第二部分叫请求头，第三部分叫请求体。
Response的消息结构分为三部分，第一部分叫响应行，第二部分叫响应头，第三部分叫响应体。
3.General:
Request URL:请求路径
Request Method:请求方式，指post,get等
Status Code:状态码 常用200,302,304,404，500等
Remote Address:远程地址
4.Response Headers:
Date:当前DMT时间（需加8小时为北京时间）
Etag:判断缓存的标识
Last-Modified：文档的最后改动时间
Refresh：表示浏览器应该在多少时间之后刷新文档，以秒计。
Content-Encoding：文档的编码（Encode）方法。
Expires：指明应该在什么时候认为文档已经过期。
Server：服务器
5.Request Headers:
Accept:浏览器可以接受的媒体类型 eg:image/webp
Accept-Encoding:浏览器申明自己接收的压缩方法。 eg：gzip,deflate
Accept-language:浏览器申明自己接收的语言。 eg:zh-CN,zh;
Connection:keep-alive 长连接
If-modified-since:配合 Last-Modified使用
If-None-match:配合Etag使用
Referer：防盗链，告诉服务器是从哪个页面链接过来的

三：浏览器缓存机制的知识:
1.Expires策略：
Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。
2.Cache-Crontrol策略：
常用值为public、private、no-cache、no- store、max-age

各个消息中的指令含义如下：
(1)public指示响应可被任何缓存区缓存。
(2)private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。
(3)no-cache告诉浏览器、服务器，不管本地缓存是否过期，使用资源副本前，一定要到服务器进行副本有效性校验。
(4)no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
(5)max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。
6.Last-Modified/If-Modified-Since:
Last-Modified/If-Modified-Since要配合Cache-Control使用。 Last-Modified：标示这个响应资源的最后修改时间。web服务器在响应请求时，告诉浏览器资源的最后修改时间。
If-Modified-Since：当资源过期时（使用Cache-Control标识的max-age）， 发现资源具有Last-Modified声明，则再次向web服务器请求时带上头 If-Modified-Since，表示请求时间。web服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。若最后修改时间较新，说明资源又被改动过，则响应整片资源内容（写在响应消息包体内），HTTP 200；若最后修改时间较旧，说明资源无新修改，则响应HTTP 304 (无需包体，节省浏览)，告知浏览器继续使用所保存的cache。
4.Etag/If-None-Match:
Etag/If-None-Match也要配合Cache-Control使用。
Etag：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识。Apache中，ETag的值，默认是对文件的索引节，大小（Size）和最后修改时间进行Hash后得到的。
If-None-Match：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etag声明，则再次向web服务器请求时带上头If-None-Match （Etag的值）。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定返回200或304。

四、主流浏览器文件缓存机制
测试环境:Windows7 、tomcat6.0 、
抓包工具:httpwatch 、firebug;
浏览器:IE9、FireFox50.0、Chrome53.0、360浏览器8.0(内核45.0)

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

**缓存控制头 Cache-Control
对 cache-control值的浏览器响应**

不进行任何缓存相关设置
前提:没有缓存设置且用户打开一个新的浏览器窗口

注意:(1)浏览器呈现的图片及文件来自缓存是指：没有向浏览器发送请求直接使用缓存。
(2)304是指浏览器重新发送请求到服务器，但是发现没有内容修改，还是用缓存中已缓存的内容。

五：结论
1.怎么让JS文件能被修改后就实时更新：
再次请求的时候，图片会直接使用缓存，文件(js等)向服务器发送304后，再使用缓存。如果一般js等文件需要每次更新后都返回200,可以在参数上加上版本号或者时间戳等。

2.Last Modified的缓存规则：
如果客户端在请求一个文件的时候，发现自己缓存的文件有 Last Modified ，那么在请求中会包含 If Modified Since ，这个时间就是缓存文件的 Last Modified 。因此，如果请求中包含 If Modified Since，就说明已经有缓存在客户端。只要判断这个时间和当前请求的文件的修改时间就可以确定是返回 304 还是 200 。对于静态文件，例如：JS、图片，服务器会自动完成 Last Modified 和 If Modified Since 的比较，完成缓存或者更新。但是对于动态页面，就是动态产生的页面，往往没有包含 Last Modified 信息，这样浏览器、网关等都不会做缓存，也就是在每次请求的时候都完成一个 200 的请求。

3.对文件及图片设置不缓存，可以通过控制响应头Expires、cache-control、pragma

–>response.setDateHeader(“Expires”,0);//自定义过期时间
–>response.setHeader(“Cache-Control”,”no-cache,no-store”);
–>response.setHeader(“Pragma”,”no-cache”);

4.对缓存的处理:
win7,win8,win10缓存路径：
IE浏览器文件及图片缓存路径：
C:\Users\Administrator\AppData\Local\Microsoft\Windows\Temporary Internet Files
Chrome浏览器文件及图片缓存路径：
C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Cache
FireFox浏览器文件及图片缓存路径：
C:\Users\Administrator\AppData\Local\Mozilla\Firefox\Profiles

Xp系统缓存路径：
IE浏览器文件及图片缓存路径：
C:\Documents and Settings\用户名\Local Settings\Temporary Internet Files
Chrome浏览器文件及图片缓存路径：
C:\Documents and Settings\用户名\Local Settings\Application Data\Google\Chrome\User Data\Default\Cache
FireFox浏览器文件及图片缓存路径：
C:\Documents and Settings\用户名\Local Settings\Application Data\Mozilla\Firefox\Profiles

注：Administrator指的是计算机的用户名，可能不同计算机设置了不同的用户名

// map = System.getenv();
//String userName = map.get(“USERNAME”);
这里userName获取的就是用户名
不过这里除了IE浏览器都是对文件重新加密了。

存缓存：
这里可以采用对比字节大小的方式通过字节流进行IO流传输，首先通过设置缓存对文件及图片设置长时间缓存，可以通过设置响应头Expires、cache-control、pragma

–>response.setDateHeader(“Expires”, System.currentTimeMillis()+1000L*3600*24); //自定义过期时间
–>response.setHeader(“Cache-Control”,”max-age=xxx”); –>response.setHeader(“Pragma”, “Pragma”);
eg:对图片的缓存时长设置为30天，可以设置response.setHeader(“Cache-Control”,“max-age= 3600*24*30”);

或者在页面对通过对JSP进行设置缓存头来达到对图片及JS文件设置缓存的目的。
–>
–>
–>
进行对图片背景图及JS进行缓存。

取缓存：

通过对字节传输大小的比较进行获取图片
结果：成功取到图片缓存

注：获取图片或文件的方式仅仅是我的一个思路，若有朋友有更好的想法可以给我留言，谢谢！