OptimizeBrowserCaching（小记）

OptimizeBrowserCaching（小记）并不只看表面做法，关键还要理解相关条件、限制和后续影响。

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

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

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

注意：这里的刷新是指在地址栏按回车！而不是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);

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

最终所有代码都在这

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();
}

辛苦所写，备用！