js性能优化（二）

http://huazi.tcreator.info/?p=450
优化1：function用法:
测试代码：
//代码优化1： function用法

 var t1=new Date().getTime();
 for(var i=0;i<4000;i++){
 var func1 = new Function("return arguments[0] + arguments[1]");
 var a=func1(10, 20); 
 }
 var t2=new Date().getTime();
 var t3=new Date().getTime();
 for(var i=0;i<4000;i++){
 var func2 = function(){ return arguments[0] + arguments[1] };
 func2(10, 20); 
 }
 var t4=new Date().getTime();
 alert("T1:"+(t2-t1)+";T2:"+(t4-t3));

上面第一中，new Function生成方法的方式，在3大浏览器下面性能均低于第二种，但是在google浏览器下性能极其低

优化2：函数作用域链:
测试代码：
//代码优化2：函数作用域链

var doc=document;
 var t1=new Date().getTime();
 for(var i=0;i<10000;i++){
	document.getElementsByTagName("img")[0].style.width="100px";
	document.getElementsByTagName("img")[0].style.height="100px";
 }
 var t2=new Date().getTime();
 var t3=new Date().getTime();
 for(var i=0;i<10000;i++){
	doc.getElementsByTagName("img")[0].style.width="100px";
	doc.getElementsByTagName("img")[0].style.height="100px";
 }
 var t4=new Date().getTime();
 alert("T1:"+(t2-t1)+";T2:"+(t4-t3));
 /*
ie:T1:157;T2:113;
ff:T1:76;T2:77;
google:29;T2:14;
*/

从上面的输出时间可以看出，ie，google下第二种方法性能都有不少提升，火狐下这2种方法在性能上貌似不相上下，不过综合起来还是第二种，性能更好
document为全局变量，在变量中时处于层级最深的一层，访问全局变量的速度要慢于局部变量，如果在对全局变量操作很多的情况下，可以把全局变量先保存在一个变量中，引用这个变量，就不会一直不断的访问这个变量，所以在性能上也能提高不少

再把上面代码改成如下形式：

 var t1=new Date().getTime();
 var doc=document;
 function a(){
   for(var i=0;i<10000;i++){
	  doc.getElementsByTagName("img")[0].style.width="100px";
	  doc.getElementsByTagName("img")[0].style.height="100px";
   }
 }
 a();
 var t2=new Date().getTime();
 var t3=new Date().getTime();
 function b(){
   var doc=document;
   for(var i=0;i<10000;i++){
	  doc.getElementsByTagName("img")[0].style.width="100px";
	  doc.getElementsByTagName("img")[0].style.height="100px";
   }
 }
 b();
 var t4=new Date().getTime();
 alert("T1:"+(t2-t1)+";T2:"+(t4-t3));
  /*
ie:T1:132;T2:107;
ff:T1:77;T2:75;
google:23;T2:13;
*/

下面这个用局部变量的方式引用doc的性能比上面用全局变量document的性能要高，所以我们用局部变量“doc”取代全局变量“document”，这样可以改进性能，尤其是对于大量使用全局变量的函数里面。

优化3：字符串连接:
测试代码：
//代码优化3：字符串连接

 var t1=new Date().getTime();
 for(var i=0;i<10000;i++){
	 var str="";
	 str += "str1" + "str2";
	 //str +="str1"
 	 //str +="str2"
 }
 var t2=new Date().getTime();
 var t3=new Date().getTime();
 for(var i=0;i<10000;i++){
	var str="",str_array=[];
 	str_array.push("str1");
 	str_array.push("str2");
 	str=str_array.join("");
 }
 var t4=new Date().getTime();
 alert("T1:"+(t2-t1)+";T2:"+(t4-t3));
 
  /*
ie:T1:7;T2:37;
ff:T1:1;T2:2;
google:1;T2:5;
*/

上面代码，str += “str1″ + “str2″;这种连接方式和 str +=”str1″;str +=”str2″的性能一样，而且都高于第二种用数组进行字符串连接操作（并不像上面参考网址上面说的，下面数组进行字符串连接方法会高于第一种方法）

优化4：缓冲数据:
测试代码：
//代码优化4：缓冲数据

 var str1="1234rtyu67889", arr1 = []; 
 var t1=new Date().getTime();
 for(var x=0;x<10000;x++){
	 for(var i = 0,j=0; i <= str1.length; i++){ 
 		arr1.push( str1.charAt(i)); 
 	}
 }
 var t2=new Date().getTime();
 var str2="1234rtyu67889", arr2 = []; 
 var t3=new Date().getTime();
 for(var k=0;k<10000;k++){
	  for(var i = 0,j=str2.length; i <= j; i++){ 
 		arr2.push( str2.charAt(i)); 
 	}
 }
 var t4=new Date().getTime();
 alert("T1:"+(t2-t1)+";T2:"+(t4-t3));
   /*
ie:T1:181;T2:170;
ff:T1:5;T2:4;
google:25;T2:4;
*/

上面第二组写法要优于第一种
上面这个代码，主要测试for循环里面的length用法，在对字符串或者数组进行操作时，如果长度值不会变化，再进行for循环时，可以按照下上面第二章方法做，先把字符串长度保存在一个临时变量里面，这样可以减少每次读取字符串长度的次数，从而提高代码性能