js性能优化（二）

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

1 2 3 4 5 6 7 8 9 10 11 12 13

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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