Ajax基础教程(5)- 5.5 完成JavaScript压缩和模糊处理

我们都知道,JavaScript是一种在客户浏览器中执行的解释型语言。换句话说,JavaScript会以明文下载到浏览器,再由浏览器根据需要执行这个JavaScript代码。

用户只要使用浏览器的查看源代码功能就能读到JavaScript源代码,该功能会显示出页面的完整HTML标记,包括所有JavaScript块。即使JavaScript源代码放在一个外部文件中,并用script标记的src属性来引用,用户也可以下载并阅读它。由于查看页面的人都能得到JavaScript源代码,所以不要把专用或机密的逻辑算法放在JavaScript中。这种逻辑最好放在服务器上,在那儿会更安全一些。

在基于Ajax的应用中,随着JavaScript的使用越来越多,JavaScript文件的大小可能会成为问题。由于JavaScript是一种解释型语言,因此不会编译为机器级的二进制码,而对于可执行代码来说,二进制码才是更高效的存储格式。如果JavaScript文件太多就会使应用的速度减慢,因为它需要先把源代码从服务器下载到浏览器,然后才能在浏览器上执行。另外,如果使用诸如JSDoc(如前所述)的工具为此要对代码加注释,本来就很大的JavaScript代码会变得更大。

你可能看到了,JavaScript缺少二进制的可执行包,这会带来两个问题:安全性差,以及需要下载大量的源代码。有没有办法避开这些问题呢?

JavaScript日益普及,因此也产生了许多工具,这些工具有助于解决这些问题。最简单的压缩工具会简单地去除JavaScript源代码中的所有注释和换行符,这样可以减小下载的源代码的大小。删除注释行和换行符能使JavaScript文件的大小缩小30%甚至更多,这要依具体情况而定。需要说明的是,JavaScript源代码中的所有语句必须正确地以分号结束,只有这样才能用这种工具对源代码进行压缩。如果没有做到这一点,你就会接收到错误或者未预料行为的消息。所以,在压缩JavaScript源代码之前,一定要使用JSLint确保所有语句都以分号结束!

还有一些工具则更进一步,可以提供模糊服务。模糊(Obfuscation)是一种过程,指全面扫描源代码,将字段和函数原来的名字改成经编码的无意义的名字,以防止其他人了解源代码的含义和内部工作。对于能编译为机器级二进制指令的语言来说(如C++),一般不需要这种模糊处理。即使Java和C#这样能够编译为中间字节码而不是二进制指令的现代语言,也需要模糊工具来保证最大程度的安全。JavaScript作为一个完全解释型语言同样需要这样一种工具。

有一个能同时提供压缩和模糊服务的免费工具,就是MemTronic的HTML/JavaScript Cruncher-Compressor(hometown.aol.de/_ht_a/memtronic/)。这个工具支持多个层次的JavaScript压缩。最低层次的压缩在这个工具中称为挤压(crunching),只是简单地删除所有注释和换行符。这个工具的相关文档称,这样可以节省20%~50%的带宽。使用“crunch”模式,可以看到JavaScript文件的大小缩小了30%。

最高层次的压缩在这个工具中称为压缩(compressing),是用一种真正的压缩机制实际压缩JavaScript源代码,并向文件增加自动解压缩功能。这个工具的相关文档称,当使用这种模式时,带宽可以节省40%~90%,而且压缩后的输出已经在当前版本的IE、Netscape、Mozilla和Opera等浏览器上成功通过测试。使用同一个JavaScript文件,应用“compressing”模式和“crunch”模式进行测试,发现使用“compress”模式使得文件大小的缩小幅度超过了65%(见图5-13)。

在写本书时,MemTronic工具的文档称,JavaScript的模糊工具还不算完备。不过,可以看看图5-13所示的输出窗口,这里显示了对JavaScript文件执行“压缩”操作的结果。这个输出中包含了许多奇怪的字符,难于阅读。尽管这可能不是真正意义上的模糊处理,但确实足以防止有不良企图的用户查看(甚至窃取)你的JavaScript源代码。


图5-13 MemTronic的 HTML/JavaScript Cruncher-Compressor可以大大缩小JavaScript源代码的大小,并且难于读懂

返回“Ajax基础教程-目录”

时间: 2024-10-11 00:13:01

Ajax基础教程(5)- 5.5 完成JavaScript压缩和模糊处理的相关文章

Ajax基础教程(5)- 5.4 使用JSLint完成JavaScript语法检查

JSLint是一个JavaScript验证工具(www.jslint.com),可以扫描JavaScript源代码来查找问题.如果JSLint发现一个问题,JSLint就会显示描述这个问题的消息,并指出错误在源代码中的大致位置.有些编码风格约定可能导致未预见的行为或错误,JSLint除了能指出这些不合理的约定,还能标志出结构方面的问题.尽管JSLint不能保证逻辑一定正确,但确实有助于发现错误,这些错误很可能导致浏览器的JavaScript引擎抛出错误. JSLint定义了一组编码约定,这比EC

AJAX基础教程及初步使用

ajax|基础教程 Ajax基础教程 什么是 AJAX? AJAX (异步 JavaScript 和 XML) 是个新产生的术语,专为描述JavaScript的两项强大性能.这两项性能在多年来一直被网络开发者所忽略,直到最近Gmail, Google suggest和google Maps的横空出世才使人们开始意识到其重要性. 这两项被忽视的性能是: 无需重新装载整个页面便能向服务器发送请求. 对XML文档的解析和处理. 步骤 1 – "请!" --- 如何发送一个HTTP请求 为了用

技术新知:AJAX基础教程

ajax|基础教程     什么是 AJAX? AJAX (异步 JavaScript 和 XML) 是个新产生的术语,专为描述JavaScript的两项强大性能.这两项性能在多年来一直被网络开发者所忽略,直到最近Gmail, Google suggest和google Maps的横空出世才使人们开始意识到其重要性. 这两项被忽视的性能是:     * 无需重新装载整个页面便能向服务器发送请求.    * 对XML文档的解析和处理. 步骤 1 – "请!" --- 如何发送一个HTTP

什么叫Ajax?(Ajax基础教程)

ajax|基础教程 由于在研究web即时通技术(TRACQ,网眼,网站商务通),所以对Ajax感兴趣起来,最近好像Ajax很火,从搜索引擎的结果可见一斑.baidu找到181,000篇相关文档,google找到了6,790,000篇.我觉得,在没有提出Ajax这个概念以前,肯定有人已经在利用这些技术做事情了,只是在最近才被炒的热闹起来.我先把网上找的资料整理在这里. 1.定义 Ajax最早是由Jesse James Garrett提出来的,原文:Ajax: A New Approach to W

Ajax与《Ajax基础教程》

ajax|基础教程 <Ajax基础教程>是国际上第一部有关Ajax的图书.其中文版也是国内首部Ajax图书,即将由人民邮电出版社推出. <Ajax基础教程>图灵程序设计丛书 (美)Ryan Asleson Nathaniel T.Schutta著金灵等译 人民邮电出版社2006年1月 定价:35元 Ajax,Ajax,Ajax!请不要弄错了,我说的不是希腊史诗中的英雄,也不是那支享誉全球的梦幻荷兰足球俱乐部,更不是加拿大的某个地名.去问问身边的技术追新族,他会一脸不屑地告诉你:连A

Ajax基础教程

ajax|基础教程 AJAX (异步 JavaScript 和 XML) 是个新产生的术语,专为描述JavaScript的两项强大性能.这两项性能在多年来一直被网络开发者所忽略,直到最近Gmail, Google suggest和google Maps的横空出世才使人们开始意识到其重要性.  这两项被忽视的性能是:  • 无需重新装载整个页面便能向服务器发送请求.  • 对XML文档的解析和处理. 步骤 1 – "请!" --- 如何发送一个HTTP请求 为了用JavaScript向服

Ajax基础教程(5)- 构建完备的Ajax开发工具箱 5.7 小结

本章我们介绍了一些工具和技术,采用这些工具和技术,会让你的开发过程更加愉快.JSDoc可以帮助建立JavaScript代码的文档,从而使其他开发人员能够更容易地理解和使用代码.如果你开始经常使用Ajax技术,肯定会编写一些你自己可重用的JavaScript库,而且会用JSDoc为代码建立文档,以便其他人更轻松地使用这些库. HTML Validator和Checky等工具可以帮助你确保所写的HTML代码是合法的HTML.不合法的HTML会导致未预见的行为,所以使用合法的HTML或XHTML能消除

Ajax基础教程(5)- 5.6 使用Firefox的Web开发扩展

Firefox的Web开发扩展为Firefox浏览器增加了大量有用的Web开发工具.一旦安装了这个扩展,你就可以通过一个工具条来访问为浏览器增加的这些工具(见图5-14).在目前能够运行Firefox的所有平台上都能使用这个扩展包,这就意味着在Windows.OS X和Linux都能顺利地使用这个扩展包.Firefox的Web开发扩展包可以从chrispederick.com/ work/firefox/webdeveloper/获得. 图5-14 Web开发扩展为Firefox增加的工具条 W

Ajax基础教程(5)- 5.3 使用DOM Inspector搜索节点

3 使用DOM Inspector搜索节点 在Mozilla Suite和Firefox浏览器中打包了一个DOM Inspector工具.如果利用DOM Inspector,则可以查看Web页面的结构化表示,甚至能搜索某些特定的节点,并自动更新DOM中的节点.在Firefox中,你可以通过Tools菜单项来访问DOM Inspector.要使用DOM Inspector来检查一个Web页面,需要在文本框中输入所需的URL,并点击Inspect框:或者也可以从File→Inspect a Wind