所谓RIA，或者说富网络网应用，就是指可以像桌面程序一样操作的网络应用。 在RIA冒出来之前，大多数的网络应用都是静态的页面构建的。

Sumo Paint 是一个基于Flash的RIA, 具有像Photoshop一样的图形编辑功能。

跟桌面应用程序不同，任何一个网页的互动往往需要重新加载一个全新的页面。而桌面应用程序，在另一方面，有很多更好的用户交互性，因为所有处理都是在用户的机器本身，所以能给以更加无缝的用户体验。

因此，软件开发商开始问自己，“我们产品应该是一个桌面应用程序还是一个Web应用程序呢？”

这一直是一个公平的问题，因为这两种类型的应用程序都具有各自优点和缺点。

桌面应用程序具有流畅的用户交互性，但软件是售出去的，会遇到发布和更新的问题。

Web应用程序，另一方面，很容易从网上获得，摆脱相关的软件发布和更新的问题，但在用户交互性体验非常差。

因此，怎么样才能两全其美呢？

RIA就是两全其美。RIA通过网络发布，有非常丰富的用户交互。得益于Ajax的出现，一个无需刷新就可以发送服务器请求的网络应用的方法，新技术出现，加入了RIA的运动。

基于这些技术出现了一些框架，帮助开发人员构建和部署富网络应用程序，如JavaScript库，ICEfaces，Adobe Flash 4（Flex 3前身），微软Silverlight，以及HTML5的。

让我们来一个个探讨RIA的框架。

网络应用的JavaScript库

JavaScript库，例如 jQuery和MooTools 是首批技术之一，可以真正的帮助部署流畅和互动的富网络应用。它们提供通过杠杆客户端脚本来处理前端接口功能的RIA框架。它们是一些基本的 Javascript文件，由一些有用的，经过跨浏览器测试功能的集成。可以使用Ajax，以及处理普通的基于用户驱动事件的交互，如显示和隐藏内容。

目前最流行的有jQuery（尤其是使用jQuery UI），MooTools，YIU（雅虎用户界面库），以及EXTJS。这些库包括RIA组件，如网格，图表和复杂的表单元素，以及处理Ajax的工具。最引人入胜的是，大部分网络开发的JavaScript库都是开源的。

如果你不想购买一个集成开发环境（IDE），但仍希望在自己的网站绚丽而专业的RIA功能，JavaScript库是一个很不错的选择。

使用JavaScript库的网站有Google，Digg，雅虎，亚马逊，微软，Twitter，以及Best Buy。

ICEfaces

ICEfaces是标准的JavaServer Faces（JSF）的框架的扩展，旨在去除方程中的JavaScript从而简化程序员的工作流程。换句话说，ICEfaces通过Java应用接口为你处理了所有的JavaScript/Ajax。通过删除这些自定义JavaScript函数的复杂引入，大大简化了创建富网络应用的任务。

如果你的团队主要成员是Java开发人员，或者如果你的网络应用程序不需要其它ICEfaces没有的复杂组件，又或者如果你的网络应用程序是事件驱动的，那么使用ICEfaces是很好的选择。如果你的网路应用是事件驱动的，请确定你已经了解ICEfaces不提供真正的“服务器推”技术的，HTML5，Flash Builder 4和Silverlight都支持的。不过，相应地ICEfaces使用长轮询的方法来模拟服务器推技术。

使用ICEfaces的网站有波音，美国航空航天局，联合太平洋公司，T-Mobile，以及美国银行。

Adobe Flash Builder 4

Flash已经出现了很长一段时间，但是用使用Flash来构建整个网络应用十分麻烦，直到Flex的引进，这是Flash的一个扩展，提供RIA网络组 件。

Adobe Flash Builder 4最令人兴奋的是它的跨平台和跨浏览器特性，允许程序在所有的操作系统和所有的浏览器上以同样的方式运行。相比于JavaScript，浏览器有不同的 JavaScript引擎管理和处理的代码，而Adobe的Flash只有一个引擎，用户通过Adobe Flash浏览器插件来安装（通常的情况是他们有了）。

Flash Builder 4 应用之所以能如此，因为它们已经嵌入到HTML页面，这意味着浏览器本身并没有对应用程序的性能有什么影响。这意味着你如果你乐意， 你还可以在IE6上运行最复杂的网络应用程序。（这当然简单，因为Flash插件/引擎经常会更新，因此只是稍微依赖于用户插件的版本）。

这些应用通常是伴随着服务器端处理，比如一个Java后端处理，而且需要Flash Builder 4IDE做开发。

如果你的团队主要是Java开发（因为搭配Java运作良好），或者你的应用程序使用事件驱动的构架，可以选择Adobe Flash Builder 4。

使用Flash作为网络应用程序的网站有Mint.com，Flickr和Hyundai。

Silverlight

Silverlight是基本上微软版本的Adobe Flex /的Adobe Flash。现在已获得了一些吸引力，但似乎并没有达到的Adobe Flash的普及程度。

Silverlight应用程序明显约束于.NET的后端，因为它是微软的产品。这意味着，你不得不 Silverlight /.NET 和Adobe Flex / [一些服务器端脚本，如PHP] 之间整合考虑。

如果你的网络应用需要复杂的图形，或者如果你的团队主要是.NET开发人员，又或者如果你的应用程序使用事件驱动的架构，那你可以选择 Silverlight。

使用Silverlight的网站，如Netflix。

HTML5

HTML5的是RIA运动中的最新发展。 HTML5，在本质上是HTML4，JavaScript，CSS，Javascript代码库以及Falsh的最优合并，利用API模型成为一个单一规 范。 HTML5的是一个开放的技术，这意味着不会有单一的主管团体如Flash的Adobe或Silverlight的微软。

由于HTML5规范还没有完成，IE9尚未发布，要建立产品级的网络应用，你还需要等待一点点时间。

目前，所有主要浏览器除了IE8都支持HTML5。由于IE8的浏览器市场占据了主要部分，在IE9发布之前，HTML5实在难以成为主流。

一旦HTML5得到广泛支持，如果你不想购买和学习的IDE（像Flex和Silverlight框架所必需的），如果你的应用程序使用事件驱动架构，或 者如果你喜欢使用内置的HTML功能和JavaScript API 功能而不是使用第三方JavaScript库，那么使用HTML是很好的选择。

尽管HTML5中可以很好地处理图形，但是使用Flash和Silverlight来处理复杂图形和动画在目前仍然容易/更快的选择。

RIA 的未来

HTML5应用程序是互联网的未来吗？不完全是。只要那些创造性和创新性的网络开发人员还在不断的去创造一些特别的东西，就会总是出现一些新技术可以造出 些HTML5或其他任何网络技术无法完成的神奇的东西。

JavaScript库，ICEfaces，Flash，Silverlight和HTML5的存在首要原因是其创造力和创新性。未来的网络将会由许多 共存的技术组成，就像现在。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 页面输出时一些常用的小技巧
• 使用Adobe Flex 3开发(MMO)大型多人在线游戏
• XmlHttpRequest的串行异步
• RIA特别专题和Flash开发平台工具下载资源发布
• Ajax跨域访问解决方案
• 24 个漂亮的个性化 HTML 表单技术
• 10个绝妙的HTML5，CSS和Javascript示例
• 10个基于 JavaScript 的 WYSIWYG 编辑器
• 10个关于Ajax的IT人需要知道的事情
• 10个Google 推动的 AJAX 库 API

Feed enhanced by Better Feed from Ozh

1. jQuery: The Write Less, Do More, JavaScript Library

jQuery 是一个很新的 JavaScript 库，它的口号是“几行代码，能干大事”（Write Less, Do More），它是拥有最多插件和扩展的 JavaScript 库，以下是 jQuery 现状：

• 当前版本： 1.3.2
• 文件尺寸：压缩后最小19KB，未压缩为120K。
• 作者： John Resig
• 拥有19种语言的教程: 教程总计183种。
• 著名用户： 超过1000个
• 插件: 3493
• 易学
• 对设计师来说非常易学，使用 CSS 语法
• 拥有大量有趣的扩展
• 拥有非常出色的社区，可能是最大的
• 被数以百万的站点使用，包括诸如 Google, Dell, CBS, NBC, DIGG, Bank of America, Wordpress, Drupal, Mozilla 等著名站点。

2. MooTools – a compact javascript framework

MooTools 是一个使用 MIT 许可的开源项目，意味着你可以在任一场合使用或对它就行修改。

• 当前版本: 1.2.3
• 未压缩尺寸: 95 KB (客户端) ，22 KB (服务器端)
• 作者: Valerio Proietti
• 著名用户: w3c, cnet, bing, …
• 官方站上的插件数目: 4
• 拥有更好的面向对象结构
• 它的动画效果更平滑
• 语法及对象句柄更富逻辑

3. Prototype: Easy Ajax and DOM manipulation for dynamic web applications

被一些大型媒体公司和组织使用，Protorype 是一个很独特的 JavaScript 库，逐渐成为 Web 引用开发者的代码基础，随着最新的 1.6.1 版本的推出，Protorype 在性能，用户自定义事件以及同现代浏览器兼容方面越来越完善。

• 最新版本: 1.6.1
• 未压缩尺寸: 136 KB (大约5000行代码)
• 作者: Sam Stephenson
• 著名用户: NASA, CNN, NBC, …
• 插件数目: 150+
• 更适用于大型 Web 程序

4. Dojo Toolkit: great experiences for everyone

Dojo 的内核小巧，快，精深，可用来创建反应灵敏的 Web 程序，拥有很出色的 UI 工具，在可访问性，本地化方面也做得很好。

• 最新版本: 1.4 Beta
• 未压缩尺寸: 26 KB (约5000行代码)
• 开发组织: Dojo Foundation
• 著名用户: AOL, IBM, Sun, …
• 支持客户端数据存储
• 支持服务器端数据存储
• 异步通讯

5. script.aculo.us: easy-to-use, cross-browser user interface JavaScript libraries

script.aculo.us 是一个开源 JavaScript 库，适用于创建视觉效果和 UI 行为，最新版本拥有一些新功能，如创建加载进程，Windows Media 和 Real Media 播放器检查等。

• 最新版本: 1.8.3 (8 October, 2009)
• 未压缩尺寸: 197 KB (包含 Prototype 和 测试页)
• 作者: Thomas Fuchs
• 著名用户: Gucci, Feedburner, Ruby on Rails, …
• Documentation wiki & Usage （文档）
• script.aculo.us 是对 Prototype 的扩展，增加了视觉效果，UI 控制等功能。

6. ExtJS: Cross-Browser Rich Internet Application Framework

ExtJS 是一个很出色的跨浏览器 JavaScript 框架，可以用来创建富 Web 应用，支持所有现代浏览器。拥有大量插件和扩展。

• 最新版本: 3.0 (6th July, 2009)
• 压缩后尺寸: 197 KB (包含 Prototype 和测试页)
• 作者: Jack Slocum
• 著名用户: Gucci, Feedburner, Ruby on Rails, …
• Download | Samples & Demos | API Documentation
• 拥有很出色的部件和技术支持

7. UIZE: supporting widgets, AJAX, DOM, templates, and more

UIZE 的一些现状：

- 一个开源 JavaScript 框架
- 很容易更换 CSS 皮肤
- 大量内置饰件
- 令人目眩的效果和强大的功能

• 压缩后的尺寸: 4.47 MB
• 作者: Chris van Rensburg

8. YUI Library: is proven, scalable, fast, and robust

YUI 是本列表中规模最宏大的 JavaScript 库，它拥有数不清的强大功能，插件以及扩展，当然要掌握它也需要很长时间。

• 最新版本: 3 (September 2009)
• 整个开发包尺寸: 5.7 MB (包括源代码，调试文件，示例等)
• 开发公司: Yahoo! Developer Network
• 著名用户: LinkedIn, Wikia, NewsVine, …

9. Archetype

Archetype 现状：

• 最新版本: 0.10.0 (September 2009)
• 尺寸: 2.14 MB
• 作者: Temsa & Swiip
• 用户: GifTeer, Meteo France, …

10. qooxdoo: the new era of web development

qooxdoo 是什么？是一个面向对象 JavaScript 库，包含跨平台开发工具链，顶级 GUI 工具以及高级客户端服务器通讯层，它是一个基于 LGPL/EPL 许可的开源项目：

• 最新版本: 0.8 (September 2009)
• 尺寸: 24 MB
• 核心开发者: 1&1 Internet AG
• Download | Samples & Demos | Documentation
• 完整的 GUI 工具包
• 支持对象间的拖放操作

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 页面输出时一些常用的小技巧
• 表单元素：40个CSS/JS风格和功能技术处理
• 网页打开新窗口的解决方案,拒绝屏蔽
• 相见恨晚的一些 JavaScript 技巧
• 用JS制作的网页版NES模拟器 IE8直接出局
• 用css+js控制图片大小的方法
• 有关 JavaScript 的 10 件让人费解的事情
• 新 API 寻求让 JavaScript 操作本地文件
• 并发下载javascript
• 常用JS验证函数总结

Feed enhanced by Better Feed from Ozh

1. <property name=“web.dir” location=“WebRoot” />
2. <property name=“yuicompressor.jar” location=“WebRoot/WEB-INF/lib/YUICompressorLib/yuicompressor-2.4.1.jar” />
3. <property name=“js.build.dir” location=“webRoot/js/” />
4. <property name=“dist.dir” location=“${build.dir}” />
6. <!– JS Compress –>
7. <target name=“js.compress”>
8. <!– java -jar yuicompressor-2.4.1.jar -o d:/temp/hello_min.js hello.js –>
9. <apply executable=“java” parallel=“false” failonerror=“true”>
10. <fileset dir=“${js.build.dir}” includes=“**/*.js” />
11. <arg line=“-jar” />
12. <arg path=“${yuicompressor.jar}” />
13. <arg line=“–charset utf-8″ />
14. <srcfile />
15. <arg line=“-o” />
16. <mapper type=“glob” from=“*.js” to=“${dist.dir}/js/*.js” />
17. <targetfile />
18. </apply>
19. </target>
21. <!– CSS Compress –>
22. <target name=“css.compress”>
23. <apply executable=“java” parallel=“false” failonerror=“true”>
24. <fileset dir=“${web.dir}” includes=“**/*.css” />
25. <arg line=“-jar” />
26. <arg path=“${yuicompressor.jar}” />
27. <arg line=“–charset utf-8″ />
28. <srcfile />
29. <arg line=“-o” />
30. <mapper type=“glob” from=“*.css” to=“${dist.dir}/*.css” />
31. <targetfile />
32. </apply>
33. </target>

     <property name="web.dir" location="WebRoot" />
     <property name="yuicompressor.jar" location="WebRoot/WEB-INF/lib/YUICompressorLib/yuicompressor-2.4.1.jar" />
     <property name="js.build.dir" location="webRoot/js/" />
     <property name="dist.dir" location="${build.dir}" />

	<!-- JS Compress -->
	<target name="js.compress">
		<!-- java -jar yuicompressor-2.4.1.jar -o d:/temp/hello_min.js hello.js -->
		<apply executable="java" parallel="false" failonerror="true">
			<fileset dir="${js.build.dir}" includes="**/*.js" />
			<arg line="-jar" />
			<arg path="${yuicompressor.jar}" />
			<arg line="--charset utf-8" />
			<srcfile />
			<arg line="-o" />
			<mapper type="glob" from="*.js" to="${dist.dir}/js/*.js" />
			<targetfile />
		</apply>
	</target>

	<!-- CSS Compress -->
	<target name="css.compress">
		<apply executable="java" parallel="false" failonerror="true">
			<fileset dir="${web.dir}" includes="**/*.css" />
			<arg line="-jar" />
			<arg path="${yuicompressor.jar}" />
			<arg line="--charset utf-8" />
			<srcfile />
			<arg line="-o" />
			<mapper type="glob" from="*.css" to="${dist.dir}/*.css" />
			<targetfile />
		</apply>
	</target>

PS：注意制定编码格式，不然会出现项目里编码不一致而产生错误。

© 我想网 Akon 所有 , 2009. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• Javascript压缩工具(Javascript compressed,Js压缩)
• YUI compressor使用说明
• 美化你的Google阅读器
• 网页鼠标点击轨迹热图跟踪软件-ClickHeat
• 替代微软Visio的免费开源软件：DIA
• 数据之美之50个数据图形化工具(下)
• 数据之美之50个数据图形化工具(上)
• 挑选VPS：Xen与OpenVZ有什么区别？
• 微博通讯和即时通讯的对决
• 定制个性化群发邮件的小技巧：Mail Merge

Feed enhanced by Better Feed from Ozh

什么是 AJAX 库 API？

AJAX 库 API 是一种内容分布网络，可加载最受欢迎的开源 JavaScript 库的架构。通过使用 Google AJAX API 加载程序的 google.load() 方法，您的应用程序能够迅速从全球任何位置访问不断增长的、最受欢迎的 JavaScript 开源库列表，包括：

• jQuery
• jQuery UI
• Prototype
• script.aculo.us
• MooTools
• Dojo
• SWFObject
• Yahoo! User Interface Library (YUI)

Google 就每个库的利益直接与关键相关人员配合，并在最新稳定版本发布时接受这些版本。一旦我们托管给定库的版本，我们承诺无限期地托管该版本。

AJAX 库 API 在使用库集合的同时消除了用 JavaScript 开发混搭的不便之处。我们消除了托管库的不便之处、正确地设置缓存标头、与最新错误修正日期保持一致等。

<script src="http://www.google.com/jsapi"></script>
<script>
  // Load jQuery
  google.load("jquery", "1");

  // on page load complete, fire off a jQuery json-p query
  // against Google web search
  google.setOnLoadCallback(function() {
    $.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&v=1.0&callback=?",

      // on search completion, process the results
      function (data) {
        if (data.responseData.results &&
            data.responseData.results.length > 0) {
          var results = data.responseData.results;

          for (var i=0; i < results.length; i++) {
            // Display each result however you wish
            alert(results[i].titleNoFormatting);
          }
        }

      });
    });
</script>

© 我想网 Akon 所有 , 2009. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 简单的Ajax实例
• 几种流行的AJAX框架jQuery,Mootools,Dojo,Ext JS的对比
• 使用框架建立富联网应用
• XmlHttpRequest的串行异步
• WordPress插件API手册
• jQuery与Extjs的Ajax的跨域访问
• Ajax跨域访问解决方案
• AJAX是如何工作的: AJAX的10个实践运用
• Ajax之XMLHTTP学习理解
• Ajax之XMLHTTP学习理解

Feed enhanced by Better Feed from Ozh

不过让人欣慰的是，Yahoo！给我们带来了YUI  compressor！，呵呵，废话少说，赶紧体验。

YUI compressor的下载地址是：http://developer.yahoo.com/yui/compressor/

淘宝做了一个可视化的版本，叫做TBCompressor，可以到这里下载：http://lifesinger.org/blog/?p=464
谢谢岁月老大！

如果你没有安装JAVA环境的话，还需要安装一下JDK

下载地址是：http://java.sun.com/javase/downloads/index.jsp 我们选择（Java SE Development Kit (JDK) 6 Update 13）这个下载。

下载，安装，一路Next，没有任何问题，对了，你可以修改一下路径。

安装完毕以后，需要配置一下JAVA_HOME环境变量。

配置方法如下。

1、点击我的电脑—>属相—>高级—>环境变量—>系统变量

2、新建变量，变量名JAVA_HOME 路径：D:\Program Files\Java\jdk1.6.0_11 （我的是在D盘，你的JDK安装到那个盘，就写那个盘）

3、找到path变量，在后面添加路径：;%JAVA_HOME%\jre6\bin

OK，一路确定，关闭窗口。

打开CMD，输入java -version

看看能不能出来版本？

java version “1.6.0_11″
Java(TM) SE Runtime Environment (build 1.6.0_11-b03)
Java HotSpot(TM) Client VM (build 11.0-b16, mixed mode, sharing)

OK,我的没有问题了，呵呵，现在，我们测试一下，看看他的压缩效果。

我们就压缩一个Dreamweaver自带的“AC_RunActiveContent.js”脚本文件。

下图中，左侧的是原始文件，右侧的是压缩后的文件。

呵呵，接近50%的压缩比，不错了！另外，就目前测试的情况来看，非常完美，不会出现在线压缩工具经常出现的“语法错误”了。

© 我想网 Akon 所有 , 2009. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• Javascript压缩工具(Javascript compressed,Js压缩)
• YUI Compressor与ANT结合使用
• 页面输出时一些常用的小技巧
• 表单元素：40个CSS/JS风格和功能技术处理
• 网页打开新窗口的解决方案,拒绝屏蔽
• 相见恨晚的一些 JavaScript 技巧
• 用JS制作的网页版NES模拟器 IE8直接出局
• 用css+js控制图片大小的方法
• 有关 JavaScript 的 10 件让人费解的事情
• 新 API 寻求让 JavaScript 操作本地文件

Feed enhanced by Better Feed from Ozh

The YUI Compressor is a JavaScript compressor which, in addition to removing comments and white-spaces, obfuscates local variables using the smallest possible variable name. This obfuscation is safe, even when using constructs such as ‘eval’ or ‘with’ (although the compression is not optimal is those cases) Compared to jsmin, the average savings is around 20%. 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)

淘宝前端的开发环境以Windows居多。为了方便使用，对YUICompressor做了层简单的封装，称之为TBCompressor. 安装和使用方法如下：

安装说明

1. 安装请点击install.cmd
2. 卸载请点击uninstall.cmd
3. 如果以前安装过2.3.5之前的版本, 请点击update.cmd升级

测试使用

1. 在test.source.js上右键，执行菜单“压缩JavaScript”，会生成test.js文件。如果再对test.js文件执行一次压缩，会生成test-min.js文件
2. CSS同1

下载试用

© 我想网 Akon 所有 , 2009. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 页面输出时一些常用的小技巧
• 表单元素：40个CSS/JS风格和功能技术处理
• 用css+js控制图片大小的方法
• 八种布局方案改善你的设计
• 24 个漂亮的个性化 HTML 表单技术
• 2008年国外最佳Web设计/开发技巧、脚本及资源总结
• 10个绝妙的HTML5，CSS和Javascript示例
• 面向对象的CSS
• 针对IE8正式版的CSS hack
• 跨浏览器的CSS固定定位{position:fixed}

Feed enhanced by Better Feed from Ozh

今天就先来说说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.2.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

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压缩代码示例
原来的代码：

格式化后：

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-mapping>
<filter-name>AddHeaderFilter</filter-name>
<url-pattern>*.gzjs</url-pattern>
</filter-mapping>

测试prototype.js是否正常的代码

在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

其主要是利用服务器自带的动态压缩功能 传输时压缩数据流.

© 我想网 Akon 所有 , 2009. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• YUI compressor使用说明
• YUI Compressor与ANT结合使用
• 多个解压缩JavaScript文件工具
• Google开源JavaScript工具
• 8个实用的 JavaScript 测试及效验工具
• 15个 Javascript 的Web UI库，框架及工具包
• 页面输出时一些常用的小技巧
• 表单元素：40个CSS/JS风格和功能技术处理
• 美化你的Google阅读器
• 网页鼠标点击轨迹热图跟踪软件-ClickHeat

Feed enhanced by Better Feed from Ozh