当页面引用一个比较大的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; } }