现在的位置: 首页 > 综合 > 正文

优化JavaScript

2013年10月08日 ⁄ 综合 ⁄ 共 1701字 ⁄ 字号 评论关闭

优化JavaScript

Web浏览器下载的是JavaScript源码,也就是所有的长变量与注释都会包含在内。这个因素和其他因素都会增加下载时间,这会增加脚本运行的总时间。增加下载时间的关键因素就是脚本所包含的字节数。

要记住一个关键数字是1160,这是能放入单个TCP-IP包中的字节数。最好能将每个JavaScript文件都保持在1160字节以下以获取最优的下载时间。

在JavaScript中,每个字符就是一个字节,因此,每个额外的字符(不管是变量名、函数名、或者注释)都会影响下载速度。部署JavaScript之前,都应该尽可能优化下载速度。

1.删除注释

2.删除制表符和空格

3.删除所有的换行

4.替换变量名

5.ECMAScript Cruncher
利用Thomas Loo开发的ECMAScript Cruncher(ESC 可以http://www.saltstorm.net/depo/esc/51AJAX.com下载)。ESC是一个小巧的Window Shell脚本。

利用Thomas Loo开发的ECMAScript Cruncher(ESC 可以下载)。ESC是一个小巧的Window Shell脚本。运行ESC,必须使用Windows系统。打开一个控制台窗口,输入以下命令:
cscript ESC.wsf -l [0-4] -ow outputfile.js inputfile.js [inputfile2.js]

第一部分,cscript是Windows Shell脚本解释程序。文件名ESC.wsf是ESC的程序本身。然后是压缩等级,一个0到4的数值,表示要进行优化的等级。-ow选项表示下一个参数是优化后输出的文件名。最后,剩下的参数是要进行优化的JavaScript文件。可以只给出一个要进行优化的文件,也可以有多个文件(多个文件估优化后会按顺序放到输出文件中)。

ESC支持的四个优化等级如下:
 0:不改变脚本,要将多个文件合到单个文件中时有用;
 1:删除所有的注释;
 2:除等级1外,再删除额外的制表符和空格;
 3:除等级2外,再删除换行;
 4:除等级3外,再进行变量名替换。

ESC擅长把变量名替换成无意义的名称。它不会更改构造名称、公用特性和公用方法名称。

使用ESC时要记住,如果某个JavaScript引用了另一个文件中的构造函数,4级优化会把对构造函数的引用替换成无意义的名称。解决方法是将两个文件合并成一个文件,这样就会保持构造函数的名称。

6.其他减少字节数的方法
 1)替换布尔值
  考虑下面的例子

  1.   var bFound=false;
  2.   for(var i=0;i<aTest.length;i++){
  3.    if(aTest[i]==vTest) {bFound=true;}
  4.  }

 
  可以替换为: 

  1.   var bFound=0;
  2.   for(var i=0;i    if(aTest[i]==vTest) {bFound=1;}
  3.  }

   2)缩短否定检测

  1.  
  2.   if(oTest !=undefined) {
  3.    //do something
  4.   }
  5.   if(oTest !=null) {
  6.    //do something
  7.   }
  8.   if(oTest !=false) {
  9.    //do something
  10. }

  虽然这些都正确,但用逻辑非操作符来操作也有同样的效果

  1.   if(!oTest) {
  2.    //do something
  3.   }

 
7.使用数组和对象字面量 

  1.    var aTest = new Array;
  2.    var aTest =[];

 
 第二行用了数组字面量,与第一行效果一样,但要短很多。

  类似,对象字面量也可用于节省空间,以下两行效果一行,但对象字面量要更简短

  1.    var aTest = new Object();
  2.    var aTest ={}

 如果要创建具有一些特性的一般对象,也可以使用字面量,如下:

  1.    var oFruit = new Object();
  2.    oFruit.color="red";
  3.    oFruit.name="apple";  

  前面的代码可用对象字面量来改写成这样:

  1.    var oFruit{color:"red",name:"apple"};

 

抱歉!评论已关闭.