Tomcat环境下设置HTTP强缓存

2017-01-14

在之前的一篇文章《HTTP缓存详解》中详细的整理了关于HTTP缓存的知识点，这一篇通过实践，具体验证如何设置HTTP的强缓存，让客户端直接从本地缓存中拿资源，而不发起网络请求。

一、设置HTTP强缓存

可通过Expires与Cache-Control控制资源何时过期。Expires通过设置一个具体过期日期来控制，Cache-Control是设置一个距离第一次请求之后多久的时间段来控制。

1.自定义Filter

过滤器代码如下：

public class FilterCache implements Filter {
	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
		// TODO Auto-generated method stub
	}
	@Override
	public void doFilter(ServletRequest request, ServletResponse response,FilterChain chain) throws IOException, ServletException {
            HttpServletResponse res = (HttpServletResponse) response;  
            //res.setDateHeader("expries", new Date().getTime()+60*60*24*1000);	//- 设置一天失效，经测试Chrome下不生效
            res.setHeader("Cache-Control", "max-age=10");  					//- 这里的单位为秒，10代表第一次请求10s后过期
	}
	@Override
	public void destroy() {
		// TODO Auto-generated method stub
	}
}

web.xml配置如下：

<!-- 过滤所有的js文件 -->
<filter>
	<filter-name>FilterCache</filter-name>
	<filter-class>com.demo.cache.FilterCache</filter-class>
</filter>
<filter-mapping>
	<filter-name>FilterCache</filter-name>
	<url-pattern>*.js</url-pattern>
</filter-mapping>

2.使用容器的Filter

tomcat容器提供自有的过滤器来设置HTTP缓存，只需在web.xml中进行配置即可，相信其它服务器也有相关的配置项，例如Nginx、WebLogic等。

配置如下：

<filter>
 <filter-name>ExpiresFilter</filter-name>
 <filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class>
 <init-param>
    <param-name>ExpiresByType image</param-name>
    <param-value>access plus 10 days</param-value>
 </init-param>
 <init-param>
    <param-name>ExpiresByType text/css</param-name>
    <param-value>access plus 10 days</param-value>
 </init-param>
 <init-param>
    <param-name>ExpiresByType application/javascript</param-name>
    <param-value>access plus 10 days</param-value>
 </init-param>
</filter>

<filter-mapping>
 <filter-name>ExpiresFilter</filter-name>
 <url-pattern>/*</url-pattern>
 <dispatcher>REQUEST</dispatcher>
</filter-mapping>

官方文档：

二、特别说明

1.客户端环境准备

在Chrome下，需进行如下设置（F12接着按F1即可打开settings面板）：

2.刷新浏览器方式

经过测试，只有通过浏览器地址栏回车的方式强缓存才会生效；以F5、浏览器刷新按钮、Ctrl+R方式刷新页面均会发起HTTP网络请求，即使缓存未过期。

三、结果

在Chrome下测试结果如下：

设置Cache-Control的过期时间为10s，第一次请求返回200，在size栏下显示文件大小；第二次刷新页面，size栏显示from memory cache,即证明浏览器未发起网路请求，直接从本地缓存中获取资源。在IE下会显示来自缓存，Firefox下显示已缓存。

经测试，使用Cache-Control设置缓存在Chrome、Firefox、Edge、IE11下均有效，使用Expires只在IE11与Edge下生效。