当你提高了用户体验,做出了很绚丽的效果而欣喜的时候,是否想过优化一下JS的效率,比如微软的live,其中的js做了压缩处理。JS的速度分为两种, 下载速度和执行速度。今天就先来说说下载速度。要想js的下载速度快,就需要尽量减小js文件的大小。这里我们可以使用一个工具ESC (ECMAScript cruncher)来帮我们完成这个工作,不过这个工具只能在Windows下使用。到
http://www.saltstorm.net/depo/esc/introduction.wbm?pod=js下载ESC.zip,解压后看看它的帮助文档。很简单。
方法一:Javascript压缩(Js压缩)工具聚合——Javascript compressed/crunched
压缩级别分为5种,从0到4
Level 0 :: No compression
Level 1 :: Comment removal
Level 2 :: Whitespace removal
Level 3 :: Newline removal
Level 4 :: Variable substitution
在WINDOWS命令行下执行
cscript ESC.wsf -ow menu2.js menu.js将会把menu.js按照js压缩级别2来压缩(默认js压缩级别为2)为menu2.js
cscript ESC.wsf -l 3 -ow menu3.js menu.js将会把menu.js按照js压缩级别3来压缩为menu3.js
需要注意的是,js压缩级别4会把变量名修改,如果你的js中用到了全局变量或者类的话,就不能使用该压缩级别了,否则其它使用你的js的文件可能会无法正常运行。
试了一下,把yui的menu.js压缩了一下,对应的级别和压缩率分别如下:
js压缩级别1:压缩率44.41%
js压缩级别2:压缩率62.82%
js压缩级别3:压缩率64.93%
Level 0 :: No compression
Level 1 :: Comment removal
Level 2 :: Whitespace removal
Level 3 :: Newline removal
Level 4 :: Variable substitution
在WINDOWS命令行下执行
cscript ESC.wsf -ow menu2.js menu.js将会把menu.js按照js压缩级别2来压缩(默认js压缩级别为2)为menu2.js
cscript ESC.wsf -l 3 -ow menu3.js menu.js将会把menu.js按照js压缩级别3来压缩为menu3.js
需要注意的是,js压缩级别4会把变量名修改,如果你的js中用到了全局变量或者类的话,就不能使用该压缩级别了,否则其它使用你的js的文件可能会无法正常运行。
试了一下,把yui的menu.js压缩了一下,对应的级别和压缩率分别如下:
js压缩级别1:压缩率44.41%
js压缩级别2:压缩率62.82%
js压缩级别3:压缩率64.93%
另外还有一个小工具jsmin也可以压缩,不过没有ESC的level选项,看了一下好像压缩效果类似于ESC的level3。
Ps:对于一些压缩的代码,在阅读时可以用JavaScript Code Improver来进行格式化。便于调试。
javascript压缩代码示例
原来的代码:
程序代码
<script language="JavaScript">var i=0,s="",k=0;function foo(){for(j=0;j<10;j++){for(i=0;i<10;i++){s="string1";k=Math.floor(Math.random()*10);}for(i=20;i>9;i--){s="string2";k=I;}}}</script>
格式化后:
程序代码
<script language="JavaScript">
var I = 0, s = "", k = 0;
function foo()
{
for(j = 0; j < 10; j++)
{
for(I = 0; I < 10; i++)
{
s = "string1";
k = Math.floor( Math.random()*10 );
}
for(I = 20; I > 9; i--)
{
s = "string2";
k = I;
}
}
}
</script>
原来的代码:
程序代码
<script language="JavaScript">var i=0,s="",k=0;function foo(){for(j=0;j<10;j++){for(i=0;i<10;i++){s="string1";k=Math.floor(Math.random()*10);}for(i=20;i>9;i--){s="string2";k=I;}}}</script>
格式化后:
程序代码
<script language="JavaScript">
var I = 0, s = "", k = 0;
function foo()
{
for(j = 0; j < 10; j++)
{
for(I = 0; I < 10; i++)
{
s = "string1";
k = Math.floor( Math.random()*10 );
}
for(I = 20; I > 9; i--)
{
s = "string2";
k = I;
}
}
}
</script>
方法二:服务器配置实现
前面提到的Javascript压缩,都是采用删除注释,删除多余空格,替换字符等方式进行的,还有一种通过服务器的配置来实现Js静态压缩的方法:
关于JavaScript的gzip静态压缩方法
传统的JS压缩(删除注释,删除多余空格等)提供的压缩率有时还是不尽不意,幸亏现在的浏览器都支持压缩传输(通过设置http header的Content-Encoding=gzip),可以通过服务器的配置(如apache)为你的js提供压缩传输,或是appfuse中使用的GZipFilter使tomcat也提供这种能力
现在的问题是这种动态的压缩会导致服务器CPU占用率过高,现在我想到的解决辨法是通过提供静态压缩(就是将js预先通过gzip.exe压缩好)
一.下面描述在tomcat中的应用
1.将prototype.js通过gzip.exe压缩保存成prototype.gzjs
2.设置header,我编写了一个简单的AddHeadersFilter来将所有以gzjs结尾的文件增加设置header Content-Encoding=gzip
web.xml中的配置
引用内容
<filter>&<60;&<60;
&<60;&<60;&<60;&<60;<filter-name>AddHeaderFilter</filter-name>&<60;&<60;
&<60;&<60;&<60;&<60;<filter-class>&<60;&<60;
&<60;&<60;&<60;&<60;&<60;&<60;&<60;&<60;badqiu.web.filter.AddHeaderFilter&<60;&<60;
&<60;&<60;&<60;&<60;</filter-class>&<60;&<60;
&<60;&<60;&<60;&<60;<init-param>&<60;&<60;
&<60;&<60;&<60;&<60;&<60;&<60;&<60;&<60;<param-name>headers</param-name>&<60;&<60;
&<60;&<60;&<60;&<60;&<60;&<60;&<60;&<60;<param-value>Content-Encoding=gzip</param-value>&<60;&<60;
&<60;&<60;&<60;&<60;</init-param>&<60;&<60;
</filter>&<60;&<60;
&<60;&<60;
<filter-mapping>&<60;&<60;
&<60;&<60;&<60;&<60;<filter-name>AddHeaderFilter</filter-name>&<60;&<60;
&<60;&<60;&<60;&<60;<url-pattern>*.gzjs</url-pattern>&<60;&<60;
</filter-mapping>
测试prototype.js是否正常的代码
程序代码
<html>&<60;&<60;
<head>&<60;&<60;
<!-- type="text/javascript"不可少,有的浏览器缺少这个不能运行 -->&<60;&<60;
<script src="prototype.gzjs" type="text/javascript"></script>&<60;&<60;
</head>&<60;&<60;
<body>&<60;&<60;
&<60;&<60;&<60;&<60;<input id="username" name="username" value="badqiu"/><br />&<60;&<60;
&<60;&<60;&<60;&<60;<input id="email" value="badqiu@gmail.com"/>&<60;&<60;
<script>&<60;&<60;
&<60;&<60;&<60;&<60;<!-- 测试prototype的方法是否正常-->&<60;&<60;
&<60;&<60;&<60;&<60;alert($F('username'))&<60;&<60;
</script>&<60;&<60;
</body>&<60;&<60;
</html>
在Apache httpd中可以直接通过在httpd.conf增加AddEncoding x-gzip .gzjs来映射.gzjs文件的header
二.相关压缩率数据
1. prototype.js 1.5.0_rc0原始大小56KB,未经任何处理直接使用gzip压缩为12KB,总压缩率79%
2. 通过js压缩工具压缩过的protytype.js为20KB,使用gzip压缩为10KB,总压缩率为83%
3. 实际项目中的多个js合并成的文件 439KB,直接通过gzip压缩为85KB,总压缩率81%
4. 439KB经过js压缩为165KB,再经过gzip压缩为65KB,总压缩率86%
基本上你都可以忽略js压缩工具的压缩率,直接使用gzip压缩
gzip下载地址 http://www.gzip.org
tomcat的压缩配置示例下载地址: http://www.blogjava.net/Files/badqiu/gziptest.rar
其主要是利用服务器自带的动态压缩功能 传输时压缩数据流.
Javascript compressed,Js压缩,javascript压缩,js压缩工具,js压缩合并,js文件压缩
方法三:在线压缩工具(小js文件更好)
http://yui.2clics.net/
http://js.clicki.cn/ JS packer2 在线压缩器
http://www.cnblogs.com/cp800614/category/130234.html js混淆器