怎么把js文件弄成jsgz文件

JavaScript019

怎么把js文件弄成jsgz文件,第1张

html中内嵌js代码修改为外部调用的方法： 1，新建一个js文件，将html中之前的代码全部选中剪切到该js文件中。如下这个案例，就只剪切其中的alert("测试")。 alert("测试")2，在html中添加js文件调用代码

gzip压缩JavaScript ExtJS JQuery gzip 压缩JavaScript

为了提高客户端的体验效果，RIA开发逐渐兴起。这样会项目中会充斥的大量的JavaScript代码，与此同时会消耗客户端浏览器性能。对于 Ext 实现的 one page one application ，对于外网访问也就产生了噩梦似的加载（除非你的网速足够快）。为了缓解（不是解决，从代码加载方面考虑）加载慢的问题可以对JavaScript进行压缩。

JavaScript的gzip静态压缩方法

一、将js格式文件压缩成gzjs格式。使用gzip.exe打包压缩后的JS文件，最后生成xx.js.gz，把xx.js.gz文件改成xx.gzjs。压缩实例： ext-all.js （610KB）, gzip.exe压缩后为ext-all.gzjs（168KB）。

附：gzip使用方法，在命令行下输入： gzip -9 ext-all.js ext-all.js.gz

修改ext-all.js.gz的后缀名ext-all.gzjs（注：也可以通过gzip -h命令查看帮助）

下载地址：http://www.gzip.org

二、在项目web.xml中加入过滤器。

代码如下：

查看复制到剪贴板打印

<filter>

<filter-name>GzipJsFilter</filter-name>

<filter-class>net.kangsoft.util.GzipJsFilter</filter-class>

<init-param>

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

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

</init-param>

</filter>

<filter-mapping>

<filter-name>GzipJsFilter</filter-name>

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

</filter-mapping>

三、加入过滤类

查看复制到剪贴板打印

package net.kangsoft.util

import java.io.IOException

import java.util.HashMap

import java.util.Iterator

import java.util.Map

import java.util.Map.Entry

import java.util.Set

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

public class GzipJsFilter

implements Filter

{

Map headers = new HashMap()

public void destroy() { }

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)

throws IOException, ServletException {

if (req instanceof HttpServletRequest)

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

else

chain.doFilter(req, res)

}

public void doFilter(HttpServletRequest request, HttpServletResponse response,

FilterChain chain)

throws IOException, ServletException

{

request.setCharacterEncoding("UTF-8")

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

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

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

}

chain.doFilter(request, response)

}

public void init(FilterConfig config) throws ServletException {

String headersStr = config.getInitParameter("headers")

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

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

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

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

}

}

}

四、在需导入js的页面head里面添加导入文件，如：<script type="text/javascript"

src="js/ext3/ext-all.gzjs"></script>

配置Apache,Tomcat的gzip压缩功能

HTTP 压缩可以大大提高浏览网站的速度，它的原理是，在客户端请求网页后，从服务器端将网页文件压缩，再下载到客户端，由客户端的浏览器负责解 压缩并浏览。相对于普通的浏览过程HTML ,CSS,Javascript , Text ，它可以节省40%左右的流量。更为重要的是，它可以对动态生成的，包括CGI、PHP , JSP , ASP , Servlet,SHTML等输出的网页也能进行压缩，压缩效率惊人

对于Tomcat5.0以后的版本是支持对输出内容进行压缩的。使用的是gzip压缩格式

对于Tomcat5.0以后的版本是支持对输出内容进行压缩的. 使用的是gzip压缩格式

下面是tomcat5.5.20 中的$tomcat_home$/conf/server.xml的原内容

查看复制到剪贴板打印

<Connector port ="80" maxHttpHeaderSize ="8192"

maxThreads ="150" minSpareThreads ="25" maxSpareThreads ="75"

enableLookups ="false" redirectPort ="8443" acceptCount ="100"

connectionTimeout ="20000" disableUploadTimeout ="true" URIEncoding ="utf-8" />

<!-- Note : To disable connection timeouts, set connectionTimeout value to 0 -->

<!-- Note : To use gzip compression you could set the following properties :

compression="on"

compressionMinSize="2048"

noCompressionUserAgents="gozilla, traviata"

compressableMimeType="text/html,text/xml"

-->

从上面的第8行内容可以看出，要使用gzip压缩功能，你可以在Connector实例中加上如下 属性即可

1) compression="on" 打开压缩功能

2) compressionMinSize="2048" 启用压缩的输出内容大小，这里面默认为2KB

3) noCompressionUserAgents="gozilla, traviata" 对于以下的浏览器，不启用压缩

4) compressableMimeType="text/html,text/xml" 压缩类型

我这里的配置内容为：

查看复制到剪贴板打印

<Connector port="80" maxHttpHeaderSize="8192"

maxThreads="150" minSpareThreads="25" maxSpareThreads="75"

enableLookups="false" redirectPort="8443" acceptCount="100"

connectionTimeout="20000" disableUploadTimeout="true" URIEncoding="utf-8"

compression="on"

compressionMinSize="2048"

noCompressionUserAgents="gozilla, traviata"

compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain" />

<!-- Note : To disable connection timeouts, set connectionTimeout value to 0 -->

<!-- Note : To use gzip compression you could set the following properties :

compression="on"

compressionMinSize="2048"

noCompressionUserAgents="gozilla, traviata"

compressableMimeType="text/html,text/xml"

-->

tomcat 开启Gzip ：

1.找到Tomcat 目录下的conf下的server.xml，并找到如下信息

查看复制到剪贴板打印

Connector port="8080"

maxHttpHeaderSize="8192"

maxThreads="150" minSpareThreads="25" maxSpareThreads="75"

enableLookups="false" redirectPort="8443" acceptCount="100"

connectionTimeout="20000" disableUploadTimeout="true"

将它改成如下的形式（其实在上面代码的下面已经有了，将他们打开而已。）

查看复制到剪贴板打印

<!-- Define a non-SSL HTTP/1.1 Connector on port 8080 -->

<Connector port="8080"

maxHttpHeaderSize="8192"

maxThreads="150" minSpareThreads="25" maxSpareThreads="75"

enableLookups="false" redirectPort="8443" acceptCount="100"

connectionTimeout="20000" disableUploadTimeout="true"

compression="on"

compressionMinSize="2048"

noCompressionUserAgents="gozilla, traviata"

compressableMimeType="text/html,text/xml"

>

这样，就能够对html和xml进行压缩了，如果要压缩css 和 js，那么需要

查看复制到剪贴板打印

<Connector port="8080"

.........

compressableMimeType="text/html,text/xml,text/css,text/javascript"

>

甚至可以压缩图片：

查看复制到剪贴板打印

<Connector port="8080"

.........

compressableMimeType="text/html,text/xml,text/css,text/javascript,image/gif,image/jpg"

>

一旦启用了这个压缩功能后，我们怎么来测试压缩是否有效呢？首先Tomcat是根据浏览器请求头中的accept-encoding来判断浏览器是否支持压缩功能，如果这个值包含有gzip，就表明浏览器支持gzip压缩内容的浏览，所以我们可以用httpclient来写一个这样的简单测试程序.

查看复制到剪贴板打印

import org.apache.commons.httpclient.HttpClient

import org.apache.commons.httpclient.methods.GetMethod

public class HttpTester {

public static void main(String[] args) throws Exception{

HttpClient http = new HttpClient()

GetMethod get = new GetMethod("http://www.dlog.cn/js/prototype.js")

try{

get.addRequestHeader("accept-encoding", "gzip,deflate")

get.addRequestHeader("user-agent", "Mozilla/4.0 (compatibleMSIE 6.0Windows NT 5.0Alexa ToolbarMaxthon 2.0)")

int er = http.executeMethod(get)

if(er==200){

System.out.println(get.getResponseContentLength())

String html = get.getResponseBodyAsString()

System.out.println(html)

System.out.println(html.getBytes().length)

}

}finally{

get.releaseConnection()

}

}

}

执行这个测试程序，看看它所输出的是什么内容，如果输出的是一些乱码，以及打印内容的长度远小于实际的长度，那么恭喜你，你的配置生效了，你会发现你网站的浏览速度比以前快多了。

对于Apache而言，有两种情况

1）针对Apache2.0之前的版本，它原本是不支持 的，不过可以通过添加第三方的module_gzip模块来启用

2）针对Apache2.0及之后的版本，Apache提供支持, 不过不叫gzip，而叫mod_deflate

下面就对Apache2.0及之后的版本作一个说明

1) 去掉#LoadModule headers_module modules/mod_headers.so前面的注释#,

2) 添加LoadModule deflate_module modules/mod_deflate.so

3) 在VirtualHost中添加

查看复制到剪贴板打印

<Location "/">

SetOutputFilter DEFLATE

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\.0[678] no-gzip

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

Header append Vary User-Agent env=!dont-vary

</Location>

我这里面有一个完整的演示

查看复制到剪贴板打印

# 加载deflate模块

LoadModule headers_module modules/mod_headers.so

LoadModule deflate_module modules/mod_deflate.so

<VirtualHost *:80>

DocumentRoot f:/apacheTest

<Location "/">

SetOutputFilter DEFLATE

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\.0[678] no-gzip

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

Header append Vary User-Agent env=!dont-vary

</Location>

</VirtualHost>