web系统js、css文件终极提速之gzip静态压缩+动态压缩

最新推荐文章于 2025-06-09 09:29:35 发布

原创最新推荐文章于 2025-06-09 09:29:35 发布 · 1.3w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#web #css #windows #include #header #encoding

JavaScript 同时被 2 个专栏收录

32 篇文章

订阅专栏

Web/JS

12 篇文章

订阅专栏

本文详细介绍了如何在Web系统中使用GZIP静态压缩技术来提高js、css文件的下载速度，进而提升页面响应速度。通过提供实际项目的处理脚本和配置文件修改细节，阐述了从预压缩文件、替换引用到设置服务器响应头的一系列步骤，确保浏览器支持GZIP，并解决了使用js压缩工具可能遇到的问题。特别强调了针对不同版本的IE浏览器的GZIP支持情况及相应的补丁安装建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先转载一个静态方法

web系统中免不了要使用大量的javascript和css文件，如开源的javascript框架prototype、jquery、extjs-core等等，这些js框架，少都有几百K，我曾经做过不少项目，都用了大量的js。特别是extjs，功能实在是强大，却也是体积最大的一个js框架。使用中稍不留神很容易导致你的系统反映缓慢。为了提高js、css文件的下载速度，从而提高页面的响应速度，减小文件的大小才是终极之道。减少这些文件的大小已经有了不少的js压缩工具可以做到，。在这里重提gzip静态压缩的技术，是由于在项目中经过实践的检验，证实是可行、高效而且低风险的做法。

如果使用js压缩工具压缩js、css文件，会存在不少的问题，而要解决这些问题，必须付出不少的人力资源。因为通常一些旧的项目，或者一些只考虑在IE中使用的web系统，在写js代码的时候，有不少不规范的地方，如在语句后忘了打“;”号，ie可以通过，其它一些浏览器却不认；js压缩后，会导致甚至在ie里面也无法运行。要解决这些js压缩后的问题，必须进行严格的测试，而往往都很难发现具体错在哪里，最终很有可能花费了大量的时间去排错。

而使用gzip静态压缩技术，却绝对不会存在这些问题，而且压缩率比js压缩还要高许多。你唯一要担心的是浏览器是否支持gzip。而现在的浏览器却都已经完全支持gzip技术了(如微软的IE、火狐firefox、苹果的safari、谷歌的chrome等)，所以就不用担心了。这里有个小小的特殊，就是微软的IE必须是要在IE6SP1或以上的版本才能很好的支持gzip，有些精间版的windows系统，就算是升级到IE6SP1或IE7都不能很好的支持gzip，这也没关系，打上几个关于gzip的微软补丁就行了（后面有相关说明）。

以下为我在实际项目中使用的gzip静态压缩技术的所有细节，提供给大家参考。

对原有web系统的gzip静态压缩处理主要方法为：

1.将web系统中的*.js、*.css文件预先通过gzip.exe压缩保存成*.jsgz 、*.cssgz 文件；

2.将web系统中引用js、css文件的地方转换为引用jsgz 、cssgz文件；

3.客户端请求jsgz、cssgz文件时，服务器通过过滤器设置header,将所有以jsgz、cssgz结尾的文件的请求增加设置“header Content-Encoding=gzip”的响应头。

下面为详细的处理脚本及相关配置文件的修改：

一)将web系统转换为使用gzip静态压缩的web系统的ant脚本

<?xml version="1.0" encoding="UTF-8"?>

</target>

</fileset>

</copy>

</target>

<path>

</fileset>

</path>

</sequential>

</for>

</sequential>

</macrodef>

</replace>

</replace>

</sequential>

</macrodef>

</project>

二)修改web.xml配置文件

<web-app ......>

<filter-name>gzipFileFilter</filter-name>

<filter-class>com.dragon.web.AddHeaderFilter</filter-class>

<init-param>

<param-name>headers</param-name>

<param-value>Content-Encoding=gzip</param-value>

</init-param>

</filter>

......

<filter-mapping>

<filter-name>gzipFileFilter</filter-name>

<url-pattern>*.jsgz</url-pattern>

</filter-mapping>

<filter-mapping>

<filter-name>gzipFileFilter</filter-name>

<url-pattern>*.cssgz</url-pattern>

</filter-mapping>

......

</web-app ......>

三)过滤器源代码

package com.dragon.web;

import java.io.IOException;

import java.util.HashMap;

import java.util.Iterator;

import java.util.Map;

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.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

* 给请求文件添加额外Header的过滤器

* @author dragon rongjih@163.com

* @since 2009-01-08

public class AddHeaderFilter implements Filter {

Map headers = new HashMap();

public void init(FilterConfig config) throws ServletException {

//获取额外配置的header

String headersStr = config.getInitParameter("headers");

String[] headers = headersStr.split(",");

for(int i = 0; i < headers.length; i++) {

String[] temp = headers[i].split("=");

this.headers.put(temp[0].trim(), temp[1].trim());

}

public void doFilter(ServletRequest req, ServletResponse res,

FilterChain chain) throws IOException, ServletException {

if(req instanceof HttpServletRequest) {

//仅对Http请求添加该过滤器的处理

doFilter((HttpServletRequest)req, (HttpServletResponse)res, chain);

}else {

chain.doFilter(req, res);

}

public void doFilter(HttpServletRequest request,

HttpServletResponse response, FilterChain chain)

throws IOException, ServletException {

//将额外配置的header添加到当前Response

for(Iterator it = headers.entrySet().iterator();it.hasNext();) {

Map.Entry entry = (Map.Entry)it.next();

response.addHeader((String)entry.getKey(),(String)entry.getValue());

}

chain.doFilter(request, response);

}

关于IE浏览器的gzip支持补充：

IE必须是要在IE6SP1或以上的版本才能很好的支持gzip，有些精间版的windows系统，就算是升级到IE6SP1或IE7都不能很好的支持gzip，这时就必须给系统安装如下几个补丁：

1. q822002 ---- 纠正IE6浏览包含Gzip编码内容网页时发生的错误

2. q831167

3. q832894

其中q822002是必须的，而Q831167和Q832894我没试过不打会不会有影响，因为我在项目中碰到打开gzip的网页有问题时都把这三个补丁打上了，当时出现过问题的系统有windows 2000、windows XP SP0、windows XP SP1、windows XP SP2、一些被精简过的windows XP系统。

=====================

以下附上动态压缩方法

简单到没什么可说的，使用nginx的配置文件nginx.conf打开压缩功能即可

http {
    include       mime.types;
    default_type  application/octet-stream;
	server_tokens off;                         ##禁止显示nginx软件的版本号
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

   gzip  on;
   gzip_min_length  1000;
   gzip_buffers     4 8k;

   gzip_comp_level 9; 				#0-9 默认值为1，值越大压缩率越高，消耗的cpu资源越多，传输量减小。
   gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;


	### nginx做非80端口转发
	server {
        listen       82;
        server_name  localhost; 
        location / {
			proxy_pass  http://127.0.0.1:7001;
			proxy_set_header	Host             	$host:82;
			proxy_set_header	X-Real-IP        	$remote_addr;
			proxy_set_header	X-Forwarded-For		$proxy_add_x_forwarded_for;
			proxy_set_header 	Via    				"nginx"; 
        }
	} 
}