Optimize Browser Caching(小记)

(1)Cache-Control,用来减少http请求
在server, response的header中,增加如下内容
response.setHeader("Cache-Control", "max-age=31536000,public");
Optimize Browser Caching(小记)

 浏览器在收到此header后。将该url对应的内容缓存max-age(单位:秒)这么久,在这个时期内,刷新页面,浏览器将会使用本地缓存,不会发任何http请求


此时在DragonFlag上观察,可以清楚的看到no request made

Optimize Browser Caching(小记)

 注意:这里的刷新是指在地址栏按回车!而不是F5或Ctrl+F5!,每种浏览器对F5的处理都不相同,请看下表:

http://stackoverflow.com/questions/385367/what-requests-do-browsers-f5-and-ctrl-f5-refreshes-generate


如果在request 的header中的使用了Cache-Control(比如强制刷新就会在request中产生该header),此时会覆盖response中的值。也就是说浏览器的设置可以改变server的response方式。


(2)Expires(用途和Cache-Control一样,减少http请求)


(3)Last-Modified(用来减少数据传输,请求不会少:)

 这个和以上两个header作用都不一样。

让我们看一下整个过程:

首先浏览器向server请求一个资源,request header中并不包含任何特别信息

服务器收到该请求,觉得这个资源如果反复访问浪费流量,于是它在header中

在server, response的header中,增加如下内容
response.setDateHeader("Last-Modified",资源最后修改时间对应的毫秒数));

浏览器访问到了所需要的资源,还发现了server增加的这个额外的时间信息。.


在下次请求该资源时,浏览器将上次server发过来的Last-Modified的值回传给server, 值不变,只是换了个名字(If-Modified-Since),也就是说浏览器在第二次请求资源时发出的header中会包含If-Modified-Since,


服务器再次接收到该请求,发现request header中包含有If-Modified-Since,

它明白了:浏览器只要想问下该资源有没有过期。

服务器对比该时间和资源的最后修改时间,如果资源已经过期,则发送资源,如果没有,则响应304,不传输内容。


浏览器收到了304信息, 明白了,资源并没有过期,继续使用自己的缓存。


如果是静态图片,web server会自动帮你加上这个响应头,并且会自己判断资源有没有过期,如果是动态内容,则自己虚拟一个时间,像这样:
response.setDateHeader("Last-Modified",Long.valueOf(updated_time_stamp));

判断资源是否过期也要自己实现,详见最后的代码,如果资源未过期,则响应304给浏览器,像这样
        response.setStatus(HttpStatus.SC_NOT_MODIFIED);

下图是浏览器第二次请求某资源时的情况,上面的框框是请求,下面的框框是响应

Optimize Browser Caching(小记)

 


最终所有代码都在这
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String imageId = request.getParameter("imageId");
log.debug("GetImage imageId=" + imageId);
// updated_time_stamp is the same as in table SERVICE_DESCRIPTOR,and changes rarely.
String updated_time_stamp = request.getParameter("updated_time_stamp");
// if response set this header, the browser will send request with a
// header "If-Modified-Since" using the value here
response.setDateHeader("Last-Modified",Long.valueOf(updated_time_stamp));
// If-Modified-Since:the first time it is null, then it's assigned a value of Last-Modified the line above,
// this assignment is made automatically by browser
long ifModifiedSince = request.getDateHeader("If-Modified-Since");
// if once sent a request, the ifModifiedSince should not be -1 here
if (ifModifiedSince != -1) {
long updated_ts = Long.valueOf(updated_time_stamp);
// if not newer, just send a 304 response.
if (updated_ts / 1000 <= ifModifiedSince / 1000) {
log.debug("response with 304 ******************");
response.setStatus(HttpStatus.SC_NOT_MODIFIED);
return;
}
}
// only fetch when after clear cache or thumb-nail is changed in table SERVICE_DESCRIPTOR
try {
log.debug("reload image =====================");
Integer imageIdNumeric = Integer.decode(imageId);
HelperServiceLocal helperLocal = helperServiceHome.create();
Image image = helperLocal.getImage(imageIdNumeric);
// HTTP1.1,cache thumb-nail for one year, in some case, no request made if use this header
response.setHeader("Cache-Control", "max-age=31536000,public");
// HTTP1.0
Calendar cal = Calendar.getInstance();
cal.add(Calendar.YEAR, 1);
response.setDateHeader("Expires", cal.getTime().getTime());
response.setContentType(image.getContentType());
response.getOutputStream().write(image.getImage());
} catch (Exception e) {
log.error(e.getMessage(), e);
}
response.flushBuffer();
}


辛苦所写,备用!

你可能感兴趣的:(Optimize Browser Caching(小记))