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