如何优化js代码(2)――for循环

2、for循环
for循环是我们经常会遇到的情况，我们先看看下面例子：

< input type = "button" value = "效率低" onclick = "func1()" />
< input type = "button" value = "效率高" onclick = "func2()" />

var arr = [];
for ( var i = 0; i < 10000; i++){
arr[i] = "<div>" + i + "</div>" ;
}
document.body.innerHTML += arr.join( "" );

//效率低的
function func1(){
var divs = document.getElementsByTagName( "div" );
var start = new Date().getTime();
for ( var i = 0; i < divs.length; i++){
//"效率低"
}
var end = new Date().getTime();
alert( "用时：" + (end - start) + "毫秒" );
}
//效率高的
function func2(){
var divs = document.getElementsByTagName( "div" );
var start = new Date().getTime();
for ( var i = 0, len = divs.length; i < len; i++){
//"效率高"
}
var end = new Date().getTime();
alert( "用时：" + (end - start) + "毫秒" );
}

IE6.0
函数	第1次	第2次	第3次	第4次	第5次	平均
func1	1416ms	1277ms	1277ms	1370ms	1136ms	1295ms
func2	0ms	0ms	0ms	0ms	0ms	0ms
Firefox4.0
函数	第1次	第2次	第3次	第4次	第5次	平均
func1	2ms	2ms	1ms	1ms	2ms	1ms
func2	1ms	1ms	1ms	2ms	1ms	1ms
Chrome6.0
函数	第1次	第2次	第3次	第4次	第5次	平均
func1	0ms	1ms	0ms	0ms	1ms	0.4ms
func2	0ms	0ms	1ms	1ms	0ms	0.4ms

由上表可以看出，在IE6.0下，其差别是非常明显，而在Firefox和Chrome下几乎没有差别，之所以在IE6.0下会有这种情况，主要是因为for循环在执行中，第一种情况会每次都计算一下长度，而第二种情况却是在开始的时候计算长度，并把其保存到一个变量中，所以其执行效率要高点，所以在我们使用for循环的时候，特别是需要计算长度的情况，我们应该开始将其保存到一个变量中。但是并不是只要是取长度都会出现如此明显的差别，如果我们仅仅是操作一个数组，取得的是一个数组的长度，那么其实两种方式的写法都差不多，我们看下面的例子：

< input type = "button" value = "效率低" onclick = "func1()" />
< input type = "button" value = "效率高" onclick = "func2()" />

var arr2 = [];
for ( var i = 0; i < 10000; i++){
arr2[i] = "<div>" + i + "</div>" ;
}
//效率低的
function func1(){
var start = new Date().getTime();
for ( var i = 0; i < arr2.length; i++){
//"效率低"
}
var end = new Date().getTime();
alert( "用时：" + (end - start) + "毫秒" );
}
//效率高的
function func2(){
var start = new Date().getTime();
for ( var i = 0, len = arr2.length; i < len; i++){
//"效率高"
}
var end = new Date().getTime();
alert( "用时：" + (end - start) + "毫秒" );
}

我们再来看看其在IE6.0下执行情况

IE6.0
函数	第1次	第2次	第3次	第4次	第5次	平均
func1	0ms	0ms	0ms	0ms	0ms	0ms
func2	0ms	0ms	0ms	0ms	0ms	0ms

从上表可以看出，如果仅仅是一个数组的话，我们看到其实两种写法都是差不多的，其实如果我们把循环再上调到100000次的话，也仅仅是差别几毫秒而已，所以在数组的情况下，我认为都是一样的。对于for循环的优化，也有人提出很多点，有人认为用-=1，或者从大到小的方式循环等等，我认为是完全没有必要的，这些优化往往实际情况下根本没有表现出来，换句话说只是计算机级别的微小的变化，但是给我们带来的却是代码的可读性大大的降低，所以实在是得不偿失。