缓存页面中的不变元素（CSS/JS/IMAGE）

浏览数：25 / 时间：2015年06月09日

访问一个web站点的时候，第一次访问的时候浏览器需要加载所有的文件，这时候主要依赖服务器的性能、带宽、以及服务器的缓存设置等，当第二次访问的时候，我们完全可以利用客户端浏览器缓存将不变的CSS/JS/IMAGE等元素存到本地，而不必每次向服务器发送请求。

这里需要区分 Last-modified \Cache-Control\Expires三个HTTP请求头的区别，

这里应用的到区别主要是Last-modified需要每次和服务器协商缓存是否过期，主要应用在一些动态内容缓存的处理上。

Cache-Control和Expires只是在第一次的时候请求，之后便会从本地判断是否过期。不同的是Cache-Control是返回的相对时间，比如当前时间之后的一个小时失效，而Expires则是绝对的GMT时间，例如在20.14年1月30日失效

（需要注意的是win下采用的时间和GMT时间有8个小时的时差）

针对（CSS/JS/IMAGE）等静态文件的缓存解决办法是，加一个Filter，这些文件的响应头加上对应的过期时间，

这里采用的是相对的过期时间

public class ResponseHeaderFilter implements Filter {
    FilterConfig fc; 

    public void doFilter(ServletRequest req, ServletResponse res,
            FilterChain chain) throws IOException, ServletException {
	String uri=request.getRequestURI();  
        HttpServletResponse response = (HttpServletResponse) res;
       	if (uri.indexOf("/css/")!=-1||uri.indexOf("/js/")!=-1||uri.indexOf("/images")!=-1) {
    			response.setHeader("Cache-Control", "public"); // HTTP/1.1 开启缓存
    			response.setHeader("Pragma", "Pragma"); // HTTP/1.0 开启缓存
 			   response.setHeader("Cache-Control","max-age=604800, public");   
 			  super.doFilter(req, res, chain);  
	}
        // pass the request/response on
        chain.doFilter(req, response);
    } 

    public void init(FilterConfig filterConfig) {
        this.fc = filterConfig;
    } 

    public void destroy() {
        this.fc = null;
    } 

}

这样第二次访问这些URL下的文件的时候，就不会向服务器发送请求，而是采用本地缓存，采用这种优化方式后，我们系统首页首次加载大概需要3s，第二次加载只需要0.3S

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

缓存页面中的不变元素（CSS/JS/IMAGE）