OptimizeBrowserCaching(小记)

作者:袖梨 2026-08-20

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

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

img_6a86f0706a20230.webp

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

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

img_6a86f0706a20a31.webp

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

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

img_6a86f0706a20e32.webp

最终所有代码都在这

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

}

辛苦所写,备用!

相关文章

精彩推荐