`
tomEnjoy
  • 浏览: 144656 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

js加密及Javascript压缩工具(Javascript compressed,Js压缩)

    博客分类:
  • Ext
阅读更多
http://dean.edwards.name/packer/

怎么压缩Js?为什么要压缩Javascript? Javascript compressed/crunched
开发Ajax除了自己要写js代码外,同样也免不了要使用其它第三方js库,是否该为JavaScript减肥?
当你提高了用户体验,做出了很绚丽的效果而欣喜的时候,是否想过优化一下JS的效率,比如微软的live,其中的js做了压缩处理。JS的速度分为两种,下载速度和执行速度。今天就先来说说下载速度。要想js的下载速度快,就需要尽量减小js文件的大小。这里我们可以使用一个工具ESC(ECMAScript cruncher)来帮我们完成这个工作,不过这个工具只能在Windows下使用。到http://www.saltstorm.net/depo/esc/introduction.wbm?pod=js下载ESC.zip,解压后看看它的帮助文档。很简单。

ESC Introduction
ESC is an ECMAScript pre-processor written in JScript, enabling an unlimited number of external scripts to be compressed/crunched into supertight, bandwidth-optimized packages. Featuring several compression-techniques such as comment removal, whitespace stripping, newline stripping and variable substitution ESC can reduce the overall size of your code with up to ~45%. Single, multiple scripts and even directories with scripts can be merged together at the compression level you decide. The processed output can later be appended or written to a file, or piped to another application for further processing via STDOUT.
 
ESC do NOT support crunching of inline scripts. So any attempt passing HTML, ASP, JSP, PHP or other equivalent documents to ESC is done at your own risk. 
 
ESC supports four levels of compression, where a higher level equals higher compression. Beware though that levels >2 requires your code to be syntaxically perfect or ESC will punish you by producing a broken and useless output. 
 
The compression ratio should hit around 25% using the default compression level on a vanilla looking script, but results as high as ~45% can be achieved depending on the script's design / your style of writing code. 
 
ESC's compression engine is intelligent in the meaning that it has language syntax, statement and keyword awareness and it *knows* about native objects and members provided by the most common scripting hosts. This knowledgebase can easily be extended by pluggin in userdefined maps with additional information to further gain control of the crunching procedure. During processing following things are taken into account : 
 
String and RegExpression read-ahead
Jscript Conditional compilation statements and variables
ECMA-262 Core language definitions (ECMAScript)
Intermediate DOM's (level 0) and DOM level 1
MS Jscript specific objects/methods
Netscape/Mozilla/Opera specific objects/methods/properties
MS WSH (Windows Scripting Host) 1+ native objects 

压缩级别分为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压缩级别1:压缩率64.93%

原来130多K的js文件压缩后也就40多K,看来还是挺有用处的。


另外还有一个小工具jsmin也可以压缩,不过没有ESC的level选项,看了一下好像压缩效果类似于ESC的level3.济南大学的一些老师写了个jsmin的图形界面程序JsMinGUI,使用起来更加方便。:-)

Dojo项目组也提供了一个工具,shrinksafe可以通过http://alex.dojotoolkit.org/shrinksafe/在线的上传要压缩的文件,处理完毕后可以保存到本地,另外shrinksafe还提供了一个本地运行的版本,需要jre1.4的支持。

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>


js压缩,巨NB的dHTML特效. 来自:
http://hometown.aol.de/_ht_a/memtronic/MemTronic_CruncherCompressor_v09g.html

JS压缩示例样本:JS压缩示例样本


更多的JS压缩器以及混淆器
http://dean.edwards.name/packer/   在线Js压缩
A Online JavaScript Compressor/Obfuscator version 2.0.2
Also available as a .NET application
开源下载:http://dean.edwards.name/download/#packer
JS压缩器帮助:http://dean.edwards.name/packer/usage/
http://dean.edwards.name/packer/usage/sample.html

http://hometown.aol.de/_ht_a/memtronic/

JavaScript Compressor/Obfuscator Demo:
http://www.brainjar.com/js/crunch/demo.html

JavaScript Code Improver:
JavaScript Code Improver Download


前面提到的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> 
     <filter-name>AddHeaderFilter</filter-name> 
     <filter-class> 
         badqiu.web.filter.AddHeaderFilter  
     </filter-class> 
     <init-param> 
         <param-name>headers</param-name> 
         <param-value>Content-Encoding=gzip</param-value> 
     </init-param> 
</filter> 
 
<filter-mapping> 
     <filter-name>AddHeaderFilter</filter-name> 
     <url-pattern>*.gzjs</url-pattern> 
</filter-mapping>

测试prototype.js是否正常的代码
程序代码<html> 
<head> 
<!-- type="text/javascript"不可少,有的浏览器缺少这个不能运行 --> 
<script src="prototype.gzjs" type="text/javascript"></script> 
</head> 
<body> 
     <input id="username" name="username" value="badqiu"/><br /> 
     <input id="email" value="badqiu@gmail.com"/> 
<script> 
     <!-- 测试prototype的方法是否正常--> 
     alert($F('username'))  
</script> 
</body> 
</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加密des,压缩gzip,MD5的例子

    JavaScript是Web开发中常用的一种脚本语言,它不仅可以用于页面交互,还能处理各种数据操作,包括加密、压缩和哈希计算。在这个例子中,我们关注的是JavaScript中的DES加密、GZIP压缩以及MD5哈希算法。 DES(Data ...

    JS压缩工具 js代码美化

    Javascript compressed/crunched 开发Ajax除了自己要写js代码外,同样也免不了要使用其它第三方js库,是否该为JavaScript减肥? 当你提高了用户体验,做出了很绚丽的效果而欣喜的时候,是否想过优化一下JS的效率,...

    微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例

    微信作为一款广泛使用的社交通讯软件,提供了一个强大的JavaScript SDK(软件开发工具包),允许开发者在微信内嵌网页中实现丰富的交互功能,其中包括图片的预览及拍照或从相册中选取图片的功能。这些功能在移动...

    网管教程 从入门到精通软件篇.txt

    网管教程 从入门到精通软件篇 ★一。★详细的xp修复控制台命令和用法!!! 放入xp(2000)的光盘,安装时候选R,修复! Windows XP(包括 ...JS:javascript源文件 JSP:HTML网页,其中包含有对一个Java servlet...

    mysql-8.0.22-winx64.zip

    9. **MySQL Shell**:这是一个多模式的命令行工具,支持JavaScript和Python,提供了更友好的交互式界面,用于数据库管理和开发。 10. **更好的Unicode支持**:MySQL 8.0全面支持Unicode 9,改进了字符集处理,尤其...

    zip

    3. Web开发:CSS、JavaScript等资源的压缩合并,减少网页加载时间。 4. 源代码版本控制:Git等版本控制系统常将更改的文件打包成ZIP,作为差异对比的一部分。 六、解压与创建ZIP文件 在各种操作系统和编程语言中,...

    小程序上传阿里云图片

    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: res =&gt; { const tempFilePaths =...

    998075581530561mysql-8版本.7z

    1. **增强的数据加密**:MySQL 8.0提供了更好的数据安全性,包括默认使用更安全的AES_256加密算法,以及对表空间和文件系统的加密支持。 2. **窗口函数**:这是SQL标准的重要功能,允许在分组查询中进行更复杂的...

    mysql-8.0版本

    MySQL 8.0提供了统一的命令行工具MySQL Shell,集成了JavaScript和Python接口,方便进行数据库管理和开发。 14. **备份与恢复**: 改进了备份工具,如mysqldump和mysqlpump,提高了备份速度,同时也支持在线备份...

    no_no_

    3. **压缩文件(Compressed File)**:提到的压缩包可能是ZIP、RAR或其他类型的压缩格式,这些格式通过算法减少文件大小,便于存储和传输。解压软件如WinRAR、7-Zip或内置的Windows资源管理器功能可用于打开和提取这...

    微信小程序图片上传百度云

    以上代码只是一个基本的示例,实际开发中可能需要根据具体需求进行调整,比如错误重试、图片压缩、多文件上传等。在使用过程中,务必注意用户隐私和数据安全,合理使用百度云和微信小程序提供的各种API。

Global site tag (gtag.js) - Google Analytics