«

javascript 代码如何优化

时间:2024-2-2 13:26     作者:韩俊     分类: Javascript


javaScript是一门解释性的语言,它不像java,C#等程序设计语言是由编译器先进行编译再运行,而是直接下载到用户的客户端进行执行。因此代码本身的优劣就直接决定了代码下载的速度以及执行的效率,这里我们讨论和给出一些优化你的 JavaScript 代码的提示和最佳实践。

1,减缓代码下载时间:

(1)Web浏览器下载的是javaScript的源码,其中包含的长变量名,注释,空格和换行等多余字符大大减缓了代码下载的时间。这些字符对于团队编写时十分有效,但在最后工程完成上传到服务器时,应当将它们全部删除。例如:

function showMeTheMoney(){ if(!money){ return false; }else{ ... } }

可优化成:

function showMeTheMoney(){if(!money){return false;}else{...}}

这样,优化后就节约了25个字节,倘若是一个大的javaScript工程,将节省出非常大的空间,不但提高了用户的下载速度,也减轻了服务器的压力。相信这样的代码大家见过不少,很多优秀的js插件源码都这么做的。

(2)对于布尔型的值true和false,true都可以用1来代替,而false可以用0来代替。对于true节省了3个字节,而false则节省了4个字节,例如:

var bSearch=false;
for(var i=0;i<aChoices.length&&!bSearch;i++){
 if(aChoices[i]==vValue) bSearch=true;
}

替换成:

var bSearch=0;
for(var i=0;i<aChoices.length&&!bSearch;i++){
 if(aChoices[i]==vValue) bSearch=1;
}

替换了布尔值之后,代码的执行效率,结果都相同,但节省了7个字节。

(3)代码中常常会出现检测某个值是否为有效值的语句,比较常见的如判断某个变量是否为"undefined","null",或者"false",例如:

if(myValue!=undefined){ ... }
if(myValue!=null){ ... }
if(myValue!=false){ ... }

以上写法虽然都正确,但采用逻辑非操作符"!"也可以达到同样的效果,代码如下:

if(!myValue){ //... }

这样的替换也可以节省一部分字节,而且不太影响代码的可读性。

(4)对于数组类型的代码优化还有将数组定义时的 new Array()直接用"[]"代替,对象定义时的 new Object()用"{}"代替等,例如:

var myArray=new Array();
var myArray=[];
var myObject=new Object();
var myObject={};

显然,第二行和第四行的代码较为精简,而且也很容易理解。

(5)在编写代码时往往为了提高可读性,函数名称,变量名称使用了很长的英文单词,但这样做也同时增加了代码的长度,例如:

function AddThreeVarsTogether(firstVar,secondVar,thirdVar){
 return (firstVar+secondVar+thirdVar);
}

可优化成:

function A(a,b,c){return (a+b+c);}

对于上面说的这些减少代码体积的方法,有一些很实用的小工具可以自动完成类似的工作,例如ECMAScript Cruncher,JSMin,Online JavaScript Compressor等,另外你可以在本站进行压缩,压缩地址见:

Javascript 源代码压缩

2,合理声明变量

减少代码的体积仅仅只能使得用户下载的速度变快,但执行程序的速度并没有改变。要提高代码执行的效果,还得在各方面做调整。

在浏览器中,JavaScript默认的变量范围是window对象,也就是全局变量。全局变量只有在浏览器关闭才释放。而JavaScript也有局部变量,通常在function中执行完毕就会立即被释放。因此在函数体中要尽可能使用var关键字来声明变量,如下代码:

function First(){
 a="";//直接使用变量
}
function Second(){
 alert(a);
}
First();
Second();

这样,变量"a"就成为了全局变量,直到页面关闭时才会被销毁,浪费了不必要的资源。如果在"a"的前面加上"var",这样"a"就成为了当前function的局部变量。在执行完First()便立即被销毁。因此,在函数体中,如果不是特别需要的全局变量,都应当使用"var"进行声明,从而节省系统资源。

3,合理书写if语句。

(1)if语句恐怕是所有代码中使用最频繁的,然而很可惜的是它的执行效率并不是很高。在用if语句和多个else语句时,一定要把最有可能的情况放在第一个,然后是可能性第二的,依此类推。例如预计某个数值在0~100之间出现的概率最大,则可以这样安排代码:

if(iNum>0&&iNum <100){
 alert('在0和100之间');
}else if(iNum>99&&iNum<200)  {
 alert('在100和200之间');
}else if(iNum>199&&iNum<300){
 alert('在200和300之间');
}else{
 alert('小于等于0或者大于等于300');
}

总是将出现概率最多的情况放在前面,这样就减少了进行多次测试后才能遇到正确条件的情况。当然也要尽可能减少使用else if语句,例如上面的代码还可以进一步优化成如下代码:

if(iNum>0){
 if(iNum<100){
  alert('在0和100之间');
 }else{
  if(iNum<200){
   alert('在100和200之间');
  }else{
   if(iNum<300){
    alert('在200和300之间');
   }else{
    alert('大于等于300');
   }
  }
 }
}else{
 alert('小于等于0');
}

上面的代码看起来比较复杂,但因为考虑了很多代码潜在的判断问题,执行问题,因此执行速度要比前面的代码快。

(2)经常用switch语句代替if语句,可令执行速度快甚至10倍。通常当超过两种情况时,最好能够使用switch语句。另外,由于case语句可以使用任何类型,也大大方便switch语句的编写。

4,最小化语句数量

脚本语句越少执行的时间就越短,而且代码的体积也会相应减少。例如使用var定义变量时可以一次定义多个,代码如下:

var iNum=365;
var sColor='phpernote';
var aMyNum=[8,7,12,3];
var oMyDate=new Date();

上面的多个定义可以用var关键字一次性定义,代码如下:

var iNum=365,sColor='phpernote',aMyNum=[8,7,12,3],oMyDate=new Date();

同样在很多迭代运算的时候,也应该尽可能减少代码量,如下两行代码:

var sCar=aCars[i];
i++;

可优化成:

var sCar=aCars[i++];

5,节约使用DOM

JavaScript对DOM的处理可能是最耗费时间的操作之一。每次JavaScript对DOM的操作都会改变页面的表现,并重新渲染整个页面,从而有明显的时间消耗。比较快捷的方法就是尽可能不在页面进行DOM操作,如下例中为ul添加了10个条目。

var oUl=document.getElementById('ulItem');
for(var i=0;i<10;i++){
 var oLi=document.createElement('li');
 oUl.appendChild(oLi);
 oLi.appendChild(document.createTextNode('Item '+i));
}

以上代码在循环中调用oUl.appendChild(oLi),每次执行这条语句后,浏览器就会重新渲染页面,其次给列表添加文本节点:

oLi.appendChild(document.createTextNode("Item "+i))

这也会造成页面被重新渲染。因此每次运行都会造成两次重新渲染页面,共20次。

通常应当尽可能减少DOM的操作,将列表项目在添加文本节点之后在添加,并合理地使用createDocumentFragment(),代码如下:

var oUl=document.getElementById('ulItem');
var oTemp=document.createDocumentFragment();
for(var i=0;i<10;i++){
 var oLi=document.createElement('li');
 oLi.appendChild(document.createTextNode('Item '+i));
 oTemp.appendChild(oLi);
}
oUl.appendChild(oTemp);

到这,关于JAVASCRIPT的优化就给大家介绍完了。希望对你有帮助。

6,一些比较常见的Javascript陷阱

(1)避免多字符串用+号连接,多字符串连接最好用StringBuffer对象。该对象封装了Array用join()方法进行连接字符串。

(2)优先使用内置方法,Js提供了相当丰富的内置方法可以充分利用。

(3)存储常用的值,多次使用同一个值时,可以将其存储在局部变量中提高访问速度。

标签: javascript

热门推荐