浏览器页面请求js、css大文件处理

当页面引用一个比较大的js和css文件时，会出现较大下载延迟，占用带宽的问题，如果一个应用里有很多这样的js或CSS文件，那么就需要优化了。

比如ext-all.js有1.4M，页面引用这个文件，正常引用如下：

<script type="text/javascript" charset="utf-8" src="/extjs/ext-all.js"></script>

HTTP中响应头（Response Headers）属性content-Encoding，可以指定内容编码方式。内容编码方式则指出字节如何编码为其他字节。
比如我们这里设定content-Encoding:gzip,这样浏览器请求一个gzip格式的文件到浏览器端，然后浏览器端再按照gzip格式解压使用。

这样就给刚才的问题提供了一种思路，我们可以把服务器端较大的js或CSS使用gizp压缩一下，文件就变小了，然后发送这个较小的文件到浏览器端，让浏览器解压后共页面引用。

第一步：把js文件压缩一下

ext-all.gzjs

第二步：html添加引用

<script type="text/javascript" charset="utf-8" src="/extjs/ext-all.gzjs"></script>

第三步：web.xml设置header属性过滤器

<filter>
      <filter-name>GzipFilter</filter-name>
      <filter-class>com.util.GzipFilter</filter-class>
      <init-param>
          <param-name>headers</param-name>
          <param-value>Content-Encoding=gzip</param-value>
      </init-param>
  </filter>
  <filter-mapping>
      <filter-name>GzipFilter</filter-name>
      <url-pattern>*.gzjs</url-pattern>
  </filter-mapping>
  <filter-mapping>
      <filter-name>GzipFilter</filter-name>
      <url-pattern>*.gzcss</url-pattern>
  </filter-mapping>

第四步：实现过滤器GzipFilter

package com.util;
 
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.Map.Entry;
 
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
public class GzipFilter implements Filter {
 
    /** 参数键值：头信息 */
    public static final String PARAM_KEY_HEADERS = "headers";
 
    /** 头信息 */
    private Map<String, String> headers;
 
    /**
     * <B>方法名称：</B>初始化<BR>
     * <B>概要说明：</B>初始化过滤器<BR>
     *
     * @param fConfig 过滤器配置
     * @throws ServletException Servlet异常
     * @see javax.servlet.Filter#init(javax.servlet.FilterConfig)
     */
    public void init(FilterConfig fConfig) throws ServletException {
        String param = fConfig.getInitParameter(PARAM_KEY_HEADERS);
        if (param == null || param.trim().length() < 1) {
            return;
        }
        this.headers = new HashMap<String, String>();
        String[] params = param.split(",");
        String[] kvs = null;
        for (int i = 0; i < params.length; i++) {
            param = params[i];
            if (param != null && param.trim().length() > 0) {
                kvs = param.split("=");
                if (kvs != null && kvs.length == 2) {
                    headers.put(kvs[0], kvs[1]);
                }
            }
        }
        if (this.headers.isEmpty()) {
            this.headers = null;
        }
    }
 
    /**
     * <B>方法名称：</B>过滤处理<BR>
     * <B>概要说明：</B>设定编码格式<BR>
     *
     * @param request 请求
     * @param response 响应
     * @param chain 过滤器链
     * @throws IOException IO异常
     * @throws ServletException Servlet异常
     * @see javax.servlet.Filter#doFilter(javax.servlet.ServletRequest,
     *      javax.servlet.ServletResponse, javax.servlet.FilterChain)
     */
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException,
            ServletException {
        if (this.headers != null) {
            HttpServletResponse res = (HttpServletResponse) response;
            for (Entry<String, String> header : this.headers.entrySet()) {
                res.addHeader(header.getKey(), header.getValue());
            }
        }
        chain.doFilter(request, response);
    }
 
    public void destroy() {
        this.headers.clear();
        this.headers = null;
    }
 
}