浅谈Javascript的压缩优化

前言

我们都知道Javascript是脚本语言，用于浏览器端编程，也就是说当我们访问一个Web网站或者应用时，需要从服务器去取相应的JS文件，然后在浏览器端解释运行。由于Web应用的丰富性，Javascript自然而然也会增多，所带来的影响就是我们需要花更多的时间去服务器取这些JS文件，因此压缩JS是一个很重要的步骤，当然既然是下载到客户机器上，JS的代码对用户也是可见的，压缩JS也可以有效的保护源码。

 

移除注释和空白

注释的作用就不解释了，用户访问你的网站，把一个带注释的代码拿过去，而不会执行注释的这段东西，岂不是白白浪费了这段代码所带来的网络带宽。于是乎我们压缩就应该把注释给Del掉。

空白则是为了代码美观，易于程序员查看调试，对于解释器来说，空白是无意义的，反而得花时间去扫描它，所以压缩应该也要去除这些无意义的空白，包括缩进，空格，空行等。

做完这一步，只是第一层次的压缩。为了使得JS文件尽量的小，我们还得采用一些新思路。

 

优化代码

我们是不是经常使用"abcd"+"efgh"这样的字符串拼接呢？于是我们考虑在压缩的时候直接就压缩成"abcdefgh"这样对比一下，少了两个双引号跟一个加号，如果使用字符串拼接比较频繁的话，这个优化会节省不少空间，并且提高了JS的执行效率（因为两个字符串拼接，解释器需要重新去申请内存空间，然后把两端字符串复制进去）。

对象的属性访问是不是也很频繁呢？例如o["name"]等，又或者是定义了对象{"name":"Object"}；这样的话我们可以优化一下就是变成o.name以及{name:"Object"}节省几个字符。

还有例如var a = new Array()优化成var a = []等（Object就是使用{}代替）；连续的多个var定义可以用，来优化成一条语句定义。

同时也能适当的提高JS的执行性能！

千万不要小看这几个字节，往往一个大型应用有多少用户在下载你这个JS文件，累积起来这个数字就很庞大了。

 

变量替换

要进一步缩小文件大小的话，我们就要去分析一些JS的词法语法，替换变量。简单据个例子：

var myObj = 1;
myObj++;
myObj--;
alert(myObj);

变量替换的意思就是把原先的变量名换成更加短的变量名:

var A = 1;
A++;
A--;
alert(A);

自己比较一下就知道节省了多少个字节，并且代码被有效的保护起来了，谁知道你的A是什么含义，对吧？

当然了，我记得好像有看过更加牛逼的替换，印象中是最后再将全部字符转化成16进制的\x的格式，有知道怎么做的同志告知一下。

 

undefined优化

在你的代码中是否经常出现 if (a != undefined)呢？很多包含undefined的语句，我们会看到这个单词很长很不爽，又不能直接把它替换成一个短一点的单词。于是后来看到了一种方法，在此之前我们先看看一个例子。

function f1(name){
	alert(name);
}

f1();

我们可以发现调用f1时不带参数，f1的name参数将会是undefined值。好，于是我们对undefined进行优化跟缩短了。

举个例子，如果是下边这样的代码：

(function(name, undefined){//在这里undefined是一个变量！不信的话可以对此函数传入多一个值试试
	/* 在这里就是我们的代码区域 */
	if (name != undefined)
		alert(name);
})('name');/* 有效参数为函数定义时的参数少一个以上，这样保证了第二个参数没有传入值，从而使其变成了undefined值 */

我们压缩的时候就会把所有的undefined替换成一个变量A，这样是不是缩短了很多字节呢？像Jquery等框架都做了这个优化，jQuery的源码的结构就是：

/*!
 * jQuery JavaScript Library v1.6.2
 * http://jquery.com/
 *
 * Copyright 2011, John Resig
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * Includes Sizzle.js
 * http://sizzlejs.com/
 * Copyright 2011, The Dojo Foundation
 * Released under the MIT, BSD, and GPL Licenses.
 *
 * Date: Thu Jun 30 14:16:56 2011 -0400
 */
(function(window,  undefined) {
	/* jQuery Code */

	window.jQuery = window.$ = jQuery;
})(window);

 

同时这样的方法执行 (function(){/*your code*/})(); 也是倡导的，避免产生的变量污染全局，具体见我的另外一篇博文：《Javascript解决过多冲突—避免污染全局》

 

本篇总结

至于用什么工具去压缩，网上可以找到很多，比如：YUI compressor，jsmin等等，Web应用上线后应该提供压缩版本有利于节约带宽，希望各位大牛能提供更加好的压缩脚本思路，拿出来一起交流分享。