- 浏览: 3503124 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
wanglf1207:
EJB的确是个不错的产品,只是因为用起来有点门槛,招来太多人吐 ...
weblogic-ejb-jar.xml的元素解析 -
qwfys200:
总结的不错。
Spring Web Flow 2.0 入门 -
u011577913:
u011577913 写道也能给我发一份翻译文档? 邮件437 ...
Hazelcast 参考文档-4 -
u011577913:
也能给我发一份翻译文档?
Hazelcast 参考文档-4 -
songzj001:
DbUnit入门实战
怎么压缩Js?为什么要压缩Javascript? Javascript compressed/crunched
开发Ajax除了自己要写js代码外,同样也免不了要使用其它第三方js库,是否该为JavaScript减肥?
当你提高了用户体验,做出了很绚丽的效果而欣喜的时候,是否想过优化一下JS的效率,比如微软的live,其中的js做了压缩处理。JS的速度分为两种,JS下载速度和Js执行速度。
今天就先来说说JS下载速度。要想js的下载速度快,就需要尽量减小js文件的大小。
两种Js压缩工具(Javascript压缩工具)
Javascript compressed - YUI Compressor
According to Yahoo!'s Exceptional Performance Team, 40% to 60% of Yahoo!'s users have an empty cache experience and about 20% of all page views are done with an empty cache。
The goal of JavaScript and CSS minification is always to preserve the operational qualities of the code while reducing its overall byte footprint (both in raw terms and after gzipping, as most JavaScript and CSS served from production web servers is gzipped as part of the HTTP protocol). The YUI Compressor is JavaScript minifier designed to be 100% safe and yield a higher compression ratio than most other tools. Tests on the YUI Library have shown savings of over 20% compared to JSMin (becoming 10% after HTTP compression). Starting with version 2.0, the YUI Compressor is also able to compress CSS files by using a port of Isaac Schlueter's regular-expression-based CSS minifier。
http://developer.yahoo.com/yui/compressor/
Download the YUI Compressor.
http://www.julienlecomte.net/yuicompressor/
YUI Compressor最新版本下载 - YUI Compressor 2.4.1下载地址:
http://www.julienlecomte.net/yuicompressor/yuicompressor-2.4.1.zip
JS和CSS压缩工具图形界面版本下载地址
淘宝团队对YUICompressor做了层简单的封装,称之为TBCompressor.
http://lifesinger.org/blog/wp-content/uploads/2008/10/TBCompressor_v2.4.zip
淘宝是怎么压缩js和css的,淘宝使用的就是YUI Compressor
目前Jquery从1.3版本开始也使用YUICompressor
The YUI Compressor is also able to safely compress CSS files. The decision on which compressor is being used is made on the file extension (js or css)
Javascript compressed - ESC Introduction
这里我们可以使用一个工具ESC(ECMAScript cruncher)来帮我们完成这个工作,不过这个工具只能在Windows下使用。到http://www.saltstorm.net/depo/esc/introduction.wbm?pod=js下载ESC.zip,解压后看看它的帮助文档。很简单。
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.
压缩级别分为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压缩代码示例
原来的代码:
格式化后:
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压缩器以及混淆器
In terms of code minification, the most widely used tools to minify JavaScript code are Douglas Crockford's JSMIN, the Dojo compressor and Dean Edwards' Packer:
Douglas Crockford's JSMIN
http://crockford.com/javascript/jsmin
the Dojo compressor
http://dojotoolkit.org/docs/shrinksafe
Dean Edwards' Packer
http://dean.edwards.name/download/
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-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是否正常的代码
<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
其主要是利用服务器自带的动态压缩功能 传输时压缩数据流.
Ajax与系列精华Javascript库(Modello)
广告图片轮显-广告图片轮流显示
AJAX+POPUP+数据库,实现动态无限级栏目
JacaScript 通用表单验证函数(我佛山人)——改进版
多级关联菜单数据库版(老问题精解)
Css house—Css房子—Css高手境界
用CSS和JS画出来的美女(酷)
display与visibility的详细文档说明
实例分析CSS属性Display与Visibility不同
Flash CSS Box Model(CSS 盒模型)
CSS中的滑动门技术
CSS实现完美垂直居中
面向对象的JavaScript举例
使用this指针与prototype实现面向对象时的区别
FrameSet 与 Iframe 彻底剖析
通用滚动条配色工具(滚动条的CSS)
Javascript 压缩工具合集(Javascript compressed,Js压缩)
CSS巧用expression来区分只读文本框
CSS如何使DIV层水平居中(包括水平/垂直)
Javascript和弹出窗口
Web 2.0 编程思想:16条法则(Dion Hinchcliffe)
Ajax跨域工具: Modello.ajax
Javascript压缩工具(Javascript compressed,Js压缩)
发表评论
-
maven常见问题问答
2012-05-05 11:34 89411.前言 Maven,发音是[`meivin ... -
Eclipse Indigo - Cannot install Android ADT Plugin
2012-02-29 01:17 3884When I try to install the And ... -
Eclipse Indigo - Cannot install Android ADT Plugin
2012-02-29 01:13 1988When I try to install the And ... -
使用iconv进行内码转换(Big5->GB2312)
2012-02-26 00:56 3503i conv 是一个通过unicode 作为中间码 ... -
Enterprise Architect's Code Template Syntax
2011-12-13 22:58 2018Code Templates are written as ... -
Enterprise Architect's Engineering Code Template Framework Code Templates
2011-12-13 22:57 1784The Code Template Framework c ... -
ActiveX控件在签名以后,仍然被IE浏览器默认安全级阻止而无法安装。
2011-11-18 08:56 5439使用代码签名证书签名后的控件在运行时报“Internet ... -
关于IObjectSafety和ActiveX组件的脚本安全
2011-11-17 19:19 3120都说ActiveX 危险,那么 ... -
在此页上的 ActiveX 控件和本页上的其它部份的交互可能不安全。你想允许这种交互
2011-11-17 19:09 14829如果采用VC++开发的ActiveX,那么第一次运行的时候,I ... -
如何编写 INF 文件
2011-11-16 14:31 2184INF文件全称Information File文件,是Wino ... -
如何在web上实现对另一个应用程序的键盘输入,就像vb中的sendkey
2011-11-16 10:49 3542用 set WshShell = CreateOb ... -
MINGW GCC 4.3.0 安装与配置(解决CREATEPROCESS问题)
2011-07-28 23:53 4709首先,下载Mingw TDM 4.3.0版本http:// ... -
使用 cURL 和 libcurl 通过 Internet 进行对话
2010-02-28 14:41 3653cURL 是一个命令行工具,可以对文件传输使用许多协议, ... -
Eclipse Babel Project Downloads
2010-02-06 21:23 2850Babel Language Packs - 0.7.1 ... -
SIP 软电话开发环境的建立
2010-01-29 00:44 3254要在windows或者linux平台下开发基于SIP的软电 ... -
基于 Eclipse 平台的代码生成技术
2009-10-12 10:09 2840http://www.ibm.com/developerwor ... -
SVK:基于 svn 的分布式版本管理系统
2009-07-11 23:48 1792SVK 是一个基于 Subversion(svn)的分布式 ... -
Firefox+IE11个WEB开发工具
2009-07-11 00:12 4368以前一直不太用FireFox,毕竟是在MS的平台下工作。记得 ... -
让结对编程跨越地理位置的限制
2009-02-14 23:45 2163本文介绍如何利用 ECF(Eclipse Communica ... -
http://download.eclipse.org/technology/babel/updat
2009-02-14 22:59 5029大家不要再想有以前那种中文语言包了,eclipse的国际化 ...
相关推荐
现有的JS代码压缩工具都是网页版的,例如ESC,shrinksafe等,他们都是在网页上用js本身实现对代码的压缩。由于网页的局限性,很难很好的管理压缩任务。聚问网络开发的js压缩专家(JsPacker)v1.0 是同功能的桌面程序,...
现有的JS代码压缩工具都是网页版的,例如ESC,shrinksafe等,他们都是在网页上用js本身实现对代码的压缩。由于网页的局限性,很难很好的管理压缩任务。聚问网络开发的js压缩专家(JsPacker)v1.0 是同功能的桌面程序,...
现有的JS代码压缩工具都是网页版的,例如ESC,shrinksafe等,他们都是在网页上用js本身实现对代码的压缩。由于网页的局限性,很难很好的管理压缩任务。聚问网络开发的js压缩专家(JsPacker)v1.0 是同功能的桌面程序,...
现有的JS代码压缩工具都是网页版的,例如ESC,shrinksafe等,他们都是在网页上用js本身实现对代码的压缩。由于网页的局限性,很难很好的管理压缩任务。聚问网络开发的js压缩专家(JsPacker)v1.0 是同功能的桌面程序,...
在给定的资源中,"javascript中文转拼音(转载)"是一个关于使用JavaScript实现中文字符转换为拼音的功能。这个功能在多种场景下都非常有用,比如搜索引擎优化(SEO)、语音合成或无障碍阅读等。 `pinyinEngine.full....
【描述】"转载解锁网易云音乐小工具 v3.0,请看说明书" 暗示这个工具可能用于解除网易云音乐的部分限制,比如地域限制或版权受限的歌曲。它强调了用户需要参考说明书来正确使用此工具,这通常意味着工具可能涉及一些...
【标题】中的“js提示框-转载+++ js 乱码+++自动提交+滚动图片加载+箭头导航(转载)”揭示了几个重要的JavaScript编程知识点,主要包括以下几个方面: 1. **JavaScript 提示框**: JavaScript 提示框是浏览器内置的...
在目前java加密很容易破解的情况下,还是先搞定js的加密和压缩,一方面可以提高页面加载性能,另外一方面也希望辛苦研发出来的成果得到一定的保护。 研究过程: 1、先强烈鄙视一下哪些随便转载文章的家伙,给我制造...
【标题】"图片批量上传-转载"涉及到的主要技术点是基于Web的文件上传功能,特别是针对图片的批量处理。在互联网应用中,用户可能需要一次性上传多张图片,这就需要前端与后端协同实现批量上传的功能。这里提到的工具...
【文件】:虽然没有提供具体的“MxDownload”文件内容,但这个名字可能指的是一个下载管理器或者一个包含相关源码的压缩文件。如果这是一个压缩包,通常会包含HTML、CSS、JavaScript文件,可能还有相关的图片或其他...
3. **nwjs-v0.36.0-beta1-win-x64** - NW.js(前身是Node-Webkit)是一个开源框架,它允许开发者使用JavaScript、HTML和CSS创建桌面应用程序。在这个上下文中,nwjs可能被用来将sb3项目嵌入到一个桌面应用中,从而...
开发使用说明(重要) ...4、微信开发者工具-->项目-->关闭代码压缩上传。 重要:开启后,会导致真机computed, props.sync 等等属性失效。 wepy开发文档地址: https://tencent.github.io/wepy/ 小程序开发文档: ...
这个名称暗示它可能与游戏开发或者互动程序有关,特别是在JavaScript环境下的WebGL技术,如Three.js库。 【描述】"转载,仅供学习参考" 表明这个压缩包的内容不是原创,而是从其他来源获取并分享的,主要目的是为了...
- **框架和库**:如Bootstrap、React、Vue.js等,提供现成的组件和工具,加速开发过程。 6. 设计工具: - **Adobe Photoshop**:用于设计网页的视觉稿和原型。 - **Sketch**:矢量图形编辑工具,适合界面设计。 ...
【压缩包子文件的文件名称列表】中的“PetsShop-main”可能表示这是项目的主代码仓库或者源代码目录,通常包含项目的源码、配置文件、资源文件等。在SpringBoot项目中,这部分可能包含以下结构: 1. `src/main/java...
他允许用户自由使用这款工具的代码,但禁止未经许可的转载,以保护他的劳动成果。httpSniffer的设计目标是为那些需要解析视频流URL的开发者提供参考资料,这在处理在线视频服务时非常有用,例如,它可以用于理解视频...
- **转载复制:** 避免大量转载或复制内容。 **13. 主要SEO工具推荐:** - **关键词排名查询:** SEMrush、Ahrefs等。 - **GOOGLE网站管理员工具:** 提供网站性能数据和故障排查功能。 - **FireFox SeoQuake插件:...
327Effective前端30:使用响应式开发 336Effective前端31:明白移动端click及自定义事件 344Effective前端32:学习JS高级技巧 355第7章 运用恰当的工具 372Effective前端33:前端的单元测试与自动化测试 372...