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

首先转载一个静态方法

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"?>

<project name="gzipcode" basedir="." default="rebuild">

<!-- 引用ant的扩展包 -->

<taskdef resource="net/sf/antcontrib/antlib.xml" />

<!-- web系统名(目录名) -->

<property name="app.name" value="myapp"/>

<!-- web系统所在目录(当前目录) -->

<property name="web.dir" value="."/>

<!-- 系统重构后所放到的路径配置 -->

<property name="build.dir" value="${web.dir}/rebuild"/>

<target name="clean" description="清理">

<delete dir="${build.dir}" />

</target>

<target name="rebuild" depends="clean" description="重新构建项目">

<copy todir="${build.dir}/${app.name}">

<fileset dir="${web.dir}" >

<include name="**/*.*"/>

</fileset>

</copy>

<gzipJSCSS dir="${build.dir}/${app.name}"/>

<replaceJSCSSImport dir="${build.dir}/${app.name}"/>

</target>

<macrodef name="gzipJSCSS">

<attribute name="dir" />

<sequential>

<for param="file">

<path>

<fileset dir="@{dir}" >

<include name="**/*.js"/>

<include name="**/*.css"/>

</fileset>

</path>

<sequential>

<gzip src="@{file}" destfile="@{file}gz"/>

</sequential>

</for>

</sequential>

</macrodef>

<macrodef name="replaceJSCSSImport">

<attribute name="dir" />

<sequential>

<!-- 修改对js文件的引用为".jsgz" -->

<replace dir="@{dir}" encoding="utf-8">

<include name="**/*.jsp"/>

<include name="**/*.html"/>

<include name="**/*.htm"/>

<replacefilter token=".js&quot;" value=".jsgz&quot;"/>

</replace>

<!-- 修改对css文件的引用为".cssgz" -->

<replace dir="@{dir}" encoding="utf-8">

<include name="**/*.jsp"/>

<include name="**/*.html"/>

<include name="**/*.htm"/>

<replacefilter token=".css&quot;" value=".cssgz&quot;"/>

</replace>

</sequential>

</macrodef>

</project>

二)修改web.xml配置文件

<web-app ......>

<!-- 声明gzip文件过滤器 -->

<filter>   

<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>   

......

<!-- gzip文件过滤器配置 -->

<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";
        }
	}
}
时间: 2024-10-26 14:10:00

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

YUICompressor+ANT压缩Java Web工程前端js/css文件

最近team里有个jsp工程想要做一些性能上的优化, 需要对工程里的前端部分(主要是js和css)做一些压缩(这是一个老旧重的工程,重构的成本非常大,也没有人力,只能一步一步去优化).想到与传统ANT工具结合的比较好的yuicompressor. yuicompressor下载 下载地址: http://maven.aliyun.com/nexus/service/local/repositories/central/content/com/yahoo/platform/yui/yuicompr

Yii2中使用asset压缩js,css文件的方法_php实例

官网文档 http://www.yiiframework.com/doc-2.0/guide-structure-assets.html yii目录下运行 asset/template assets.php 生成assets.php,这是一个配置模板,并修改如下 <?php /** * Configuration file for the "yii asset" console command. */ // In the console environment, some pat

Yii2中使用asset压缩js,css文件的方法

官网文档 http://www.yiiframework.com/doc-2.0/guide-structure-assets.html yii目录下运行 asset/template assets.php 生成assets.php,这是一个配置模板,并修改如下 <?php /** * Configuration file for the "yii asset" console command. */ // In the console environment, some pat

对网站中的js,css文件进行打包

一,为什么要用smarty进行打包 apache中也有给js,css这样的静态文件进行打包压缩的模块,但是本文所说的不是以这种方式进行的打包,而是和smarty结合的方式来把网站中的js,css文件进行打包. 为什么要进行打包呢,主要目的是为了合理的管理自己的代码 .现在有好多网站,你查看一下网站的源码的话,你会发现网站的头部有大量的JS文件和CSS文件,网站的尾部也有可能有大量的JS文件.以webqq为例吧: Java代码   <script type="text/javascript&

常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数_javascript技巧

为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在"sourceController.js"文件内. function sourceController(){ var root = ""; var cssCount = 0; // css加载计数器 var jsCount = 0; // js加载计数器 this.callfunc = null; // 回调函数 this.

ASP.NET MVC4之js css文件合并功能(3)_实用技巧

MVC4增加了一些新功能,接下来,我们来研究下MVC4中的新增功能,我们在新建一个MVC4项目的时候,会发现在项目下多出了一个App_Start文件夹,文件夹下面有4个文件,BundleConfig.cs,FilterConfig.cs,RouteConfig.cs,WebApiConfig.cs,其中BundleConfig.cs文件就是我们这一节要讲的的文件. 众所周知,浏览器在向服务器发送请求的时候,请求的文件连接数量是有限制的.使用BundleConfig可以将多个文件请求和并成一个请求

Web系统通过EXE文件实现读取客户电脑MAC等硬件信息且兼容非IE浏览器_实用技巧

对于一般情况来说,我们用得最多的可能是使用ActiveX控件的方法来实现,但此方案只适用于IE浏览器.为了能兼容不同的浏览器,如FireFox等,我们就需要考虑到一种比较通用的方法.此方法我们可以参考"在很多网站中,会在网页的某个地方给一个链接来直接启动QQ来聊天".这种方法可以实现Web系统来调用客户端电脑的某个exe文件(前提是在客户端必须安装需调用的exe应用程序).QQ的解决方法是采用在OS中注册一种自定义的协议,如:tencent://message/?uin=8888888

如何使用jquery动态加载js,css文件实现代码_jquery

使用jquery动态加载js,css文件 复制代码 代码如下: $.extend({ includePath: '', include: function(file) { var files = typeof file == "string" ? [file]:file; for (var i = 0; i < files.length; i++) { var name = files[i].replace(/^\s|\s$/g, ""); var att =

javascript include/import 动态加载js/css文件方法总结

第一种:一般用在外部CSS文件中加载必须的文件  程序代码  代码如下 复制代码 @import url(style.css); /*只能用在CSS文件中或者style标签中*/ 第二种:简单的在页面中加载一个外部CSS文件  程序代码  代码如下 复制代码 document.createStyleSheet(cssFile); 第三种:用createElement方法创建CSS的Link标签  程序代码  代码如下 复制代码 var head = document.getElementsByT