关于Gzip压缩js文件提高网站运行速度

关于Gzip压缩js文件提高网站运行速度

 

 

一、为什么要压缩Js文件？

：我们要知道一个服务器在响应客户端请求的效率上，很大一部分取决于界面所需的css、js等文件的大小以及数量。那么对于这些可编辑文件进行压缩，便能够很好的提高

服务器响应客户端请求的效率，从而达到优化的效果。

 

二 、为什么要使用GZIP？

：Gzip是一个非常成熟的文件压缩工具，且客户端浏览器能够自动（自动：需在服务器中配置响应的头部信息）解压Gzip压缩的文件。

 

三、如何下载GZIP，及使用GZIP？

：1.下载地址：www.gzip.org 下载最新GZIP工具包，主要的就是gzip.exe可执行程序。

 2.在下载的gzip文件加中有一个关于执行gzip程序相关选项信息的DOC文档。

 

 3.我们主要使用gzip对js文件进行压缩处理。当你想执行压缩操作的时候你只需简单的将js文件拖动到gzip.exe文件上，命令窗口闪过便会在你的js文件目录中看见

 一个xx.js.gz的压缩文件包，之后我们将xx.js.gz重命名为xx.gzjs.

   如果你需要在执行压缩的时候带参数选项，你可以在cmd中输入 gzip [options] 压缩文件名（同目录不需要写路径） [压缩后的文件名称] 即可。

四、拦截压缩文件配置请求响应信息。

：为什么要拦截？为了配置请求响应信息，告诉浏览器文件类型。让浏览器自动解压缩文件。

 

 

   代码如下：

JavaCode：

 

package org.viancent.filter.gzfilter;

import java.util.*;
import java.io.IOException;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("unchecked")
public class GzFilter implements Filter {
	private Map headers = new HashMap();

	@Override
	public void destroy() {
	}

	@Override
	public void doFilter(ServletRequest request, ServletResponse response,
			FilterChain chain) throws IOException, ServletException {
		// 判断request的类型
		if (request instanceof HttpServletRequest) {
			// 强制转换请求类型，调用doFilter重载方法向响应头部添加配置信息
			doFilter((HttpServletRequest) request,
					(HttpServletResponse) response, chain);
		} else {
			// 执行下一步
			chain.doFilter(request, response);
		}

		/*
		 * 这里是第二种简易写法，直接进行响应头信息设置。使用这种写法便不需要在web.xml中配置初始化参数等等。 缺点就是灵活性不够
		 */
		// ((HttpServletResponse) response).setHeader("Content-Encoding",
		// "gzip");
		// chain.doFilter(request, response);
	}

	public void doFilter(HttpServletRequest request,
			HttpServletResponse response, FilterChain chain)
			throws IOException, ServletException {
		// 设置请求的编码格式
		request.setCharacterEncoding("GBK");
		// 使用Map调用其entrySet()返回一个Set<Map.Entry>的集合,Map.Entry为Map的成员内部类，Map.Entry提供两个方法getKey(),getValue()
		for (Iterator it = headers.entrySet().iterator(); it.hasNext();) {
			Map.Entry entry = (Map.Entry) it.next();
			// 循环配置响应头部信息
			response.setHeader((String) entry.getKey(),
					(String) entry.getValue());
		}

		// 执行下一步
		chain.doFilter(request, response);
	}

	@Override
	public void init(FilterConfig request) throws ServletException {
		// 获取headers初始化属性值 对应
		/*
		 * <init-param> <param-name>headers</param>
		 * <param-value>Content-Encoding=gzip</param-value> </init-param>
		 */
		String headerStr = request.getInitParameter("headers");
		// 切割初始化参数headers的数据信息
		String[] headers = headerStr.split(",");
		// 解析web.xml中Filter配置标签中的初始化数据信息
		/*
		 * 在这里提供了一个配置所有相应头部信息的扩展功能，例如可以在xm文件中配置多个参数信息
		 * <param-value>Content-Encoding=gzip,cache=nocache</param-value>
		 */
		for (int i = 0; i < headers.length; ++i) {
			String[] temp = headerStr.split("=");
			// 将配置信息通过=分割后以键值对的形式保存 例如：headers.put("Content-Encoding","gzip");
			this.headers.put(temp[0].trim(), temp[1].trim());
		}
	}

}

web.xml:
			  <filter>
				<filter-name>gzFilter</filter-name>
				<filter-class>org.viancent.filter.gzfilter.GzFilter</filter-class>
				
				<init-param>
					<param-name>headers</param-name>
					<param-value>Content-Encoding=gzip</param-value>
				</init-param>
			  </filter>
			  
			  <filter-mapping>
				<filter-name>gzFilter</filter-name>
				<url-pattern>*.gzjs</url-pattern>
			  </filter-mapping>

Jsp:
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%> //如果解压出来的js文件出现乱码，请将所有的格式进行统一，尤其是在编译js文件的时候
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
	<html>
		<head>

		<title>My JSP 'index.jsp' starting page</title>
		</head>
	<script type="text/javascript"
		src="<%=request.getContextPath()%>/userjs/ext-all-debug.gzjs" charset="GBK"></script>//保持编码格式
		<body onload="showMessage()">
		</body>
	</html>