JavaScript性能优化示例.docx

JavaScript性能优化示例：

Function.apply()

循环语句的选取

局部变量和全局变量

减少对象查找

使用直接量

DOM相关

jQuery相关

用Function.apply()的参数数组化来提高JavaScript程序性能

我们先从Math.max()函数说起， Math.max后面可以接任意个参数，最后返回所有参数中的最大值。比如

alert(Math.max(5,8)) //8alert(Math.max(5,7,9,3,1,6)) //9

但是在很多情况下，我们需要找出数组中最大的元素。

vararr=[5,7,9,1]

alert(Math.max(arr)) // 这样却是不行的。一定要这样写

functiongetMax(arr){vararrLen=arr.length;

for(vari=0,ret=arr[0];iarrLen;i++){ret=Math.max(ret,arr[i]);

}

returnret;

}

这样写麻烦而且低效。如果用apply呢，看代码：functiongetMax2(arr){

returnMath.max.apply(null,arr)

}

两段代码达到了同样的目的，但是getMax2却优雅，高效，简洁得多。下面是示例1的性能测试：

script

varmyArr=newArray()functionfillRnd(arrLen){ //填入arrLen个1-10的随机数字到数组for(vari=0,arr=[];iarrLen;i++){

arr[i]=Math.ceil(Math.random()*10)

}

returnarr

}

functiongetMax(arr){

vararrLen=arr.length;

for(vari=0,ret=arr[0];iarrLen;i++){ret=Math.max(ret,arr[i]);

}

returnret;

}

functiongetMax2(arr){

returnMath.max.apply(null,arr)

}

myArr=fillRnd(20*10000) //生成20万个随机数填到数组vart1=newDate()

varmax1=getMax(myArr)vart2=newDate()

varmax2=getMax2(myArr)vart3=newDate()

if(max1!==max2)alert(error)

alert([t3-t2,t2-t1]) //在我机器上16,109.不同的机器,结果可能有差异

/script

通过20万个数据的比较，getMax2时间为16ms而getmax时间为109。两者相差6倍

循环语句的选取

循环是很常用的一个控制结构，大部分东西要依靠它来完成，在JavaScript中，我们可以使用for(;;),while(),for(in)三种循环，事实上，这三种循环中for(in)的效率极差，因为他需要查询散列键，只要可以就应该尽量少用。for(;;)和while循环的性能应该说基本（平时使用时）等价。如果是循环变量递增或递减，不要单独对循环变量赋值，应该在它最后一次读取的时候使用嵌套的++或—操作符。

如果要与数组的长度作比较，应该事先把数组的length属性放入一个局部变量中，减少查询次数。

局部变量和全局变量

局部变量的速度要比全局变量的访问速度更快，因为全局变量其实是全局对象的成员，而局部变量是放在函数的栈当中的。不使用Eval

使用eval相当于在运行时再次调用解释引擎对内容进行运行，需要消耗大量时间

减少对象查找

因为JavaScript的解释性，所以a.b.c.d.e，需要进行至少4次查询操作，先检查a再检查a中的b，再检查b中的c，如此往下。所以如果这样的表达式重复出现，只要可能，应该尽量少出现这样的表达式，可以利用局部变量，把它放入一个临时的地方进行查询。

这一点可以和循环结合起来，因为我们常常要根据字符串、数组的长度进行循环，而通常这个长度是不变的，比如每次查询a.length，就要额外进行一个操作，而预先把varlen=a.length，则就少了一次查询。

字符串连接

如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。如果要连接多个字符串，应该少使用+=，如

s+=a;s+=b;s+=c;应该写成

s+=a+b+c；而如果是收集字符串，比如多次对同一个字符串进行+=操作的话