首页 > 程序开发 > web前端 > JavaScript >

缓存页面中的不变元素(CSS/JS/IMAGE)

2014-01-27

访问一个web站点的时候,第一次访问的时候浏览器需要加载所有的文件,这时候主要依赖服务器的性能、带宽、以及服务器的缓存设置等,当第二次访问的时候,我们完全可以利用客户端浏览器缓存将不变的CSS JS IMAGE等

访问一个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





相关文章
最新文章
热点推荐