js性能优化（二）

来源：互联网发布：证券从业资格证软件编辑：程序博客网时间：2024/06/01 09:03

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

12345678910111213

 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：函数作用域链

12345678910111213141516171819

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为全局变量，在变量中时处于层级最深的一层，访问全局变量的速度要慢于局部变量，如果在对全局变量操作很多的情况下，可以把全局变量先保存在一个变量中，引用这个变量，就不会一直不断的访问这个变量，所以在性能上也能提高不少

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

1234567891011121314151617181920212223242526

 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：字符串连接

1234567891011121314151617181920212223

 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：缓冲数据

12345678910111213141516171819202122

 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循环时，可以按照下上面第二章方法做，先把字符串长度保存在一个临时变量里面，这样可以减少每次读取字符串长度的次数，从而提高代码性能

0 0