散分，js中三种遍历数组的效率

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jquery</title>
    <style type="text/css">
#info {
color:#FF0000;
height:150px;
}
    </style>
</head>
<body>
<div id="div1">
<input value="5000" type="text" id="txt1"/><input type="button" id="btn1" value="生成 checkbox"/>
<div id="info">
<input type="button" id="btnTest1" onclick="fun1(this)" value="第一种"/><span></span><br/>
<input type="button" id="btnTest1" onclick="fun2(this)" value="第二种"/><span></span><br/>
<input type="button" id="btnTest1" onclick="fun3(this)" value="第三种"/><span></span><br/>
</div>
<div id="box"></div>
</div>
</body>
<script type="text/javascript">
var g=function(id) {return document.getElementById(id);};
g("btn1").onclick=function() {
var val=g("txt1").value-0;
if(!isNaN(val)) {
var box=g("box");
box.innerHTML="";
for(var i=0;i<val;i++) {
var chk=document.createElement("input");
chk.type="checkbox";
box.appendChild(chk);
}
}
}
//这里为了简单就没有判断type
var fun1=function(obj) {//第一种直接在for中取数组长度
var chks=g("box").getElementsByTagName("input");
var b=!chks[0].checked;
var d=new Date();
for(var i=0;i<chks.length;i++) {
chks[i].checked=b;
}
obj.nextSibling.innerHTML=new Date()-d;
}
var fun2=function(obj) {//第二种
var chks=g("box").getElementsByTagName("input");
var b=!chks[0].checked;
var d=new Date();
for(var i=0;chks[i];i++) {
chks[i].checked=b;
}
obj.nextSibling.innerHTML=new Date()-d;
}
var fun3=function(obj) {//第三种将数组的长度放到一个局部变量中
var chks=g("box").getElementsByTagName("input");
var b=!chks[0].checked;
var length=chks.length;
var d=new Date();
for(var i=0;i<length;i++) {
chks[i].checked=b;
}
obj.nextSibling.innerHTML=new Date()-d;
}
</script>
</html>结果：
在5000个chk时,多次测试结果：
第一种方式500毫秒左右
第二种方式大多数是63，少数是46（跟第三种一样）
第三种几乎每次都是46，47的样子
ps:假设checkbox选中和取消的速度是一样，实际上也差不多

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

第一种效率比后两者低是比较肯定的，因为每次都需要访问当前的数组对象，再可以找到length。
第二种看起来比第三种高，大概说明访问数组的长度的开销要比访问越界元素的开销要小吧。楼主费心了，学习了一招。
第一种：每次循环读取 chks 集合的属性 length，赋值 chks[i]；
第二种：每次循环定位 chks[i]，赋值 chks[i]；
第三种：每次循环读取变量 length，赋值 chks[i]。第一种：453 ms
第二种：47 ms
第三种：31 ms去除公共项赋值 chks[i]，简化为：第一种：每次循环读取 chks 集合的属性 length；
第二种：每次循环定位 chks[i]；
第三种：每次循环读取变量 length。代码也随之简化，并重新测试
第一种：406 ms
第二种：16 ms
第三种：0 ms简化后，都节省了30-40ms，这是赋值 chks[i] 消耗的时长。现在就简单了，第三种直接读取变量速度最快，第二种集合定位次之，第一种最慢，
每种之间相差一个数量级。第一种之所以慢是因为访问集合的 length 属性时需要遍历 prototype，从而获取 length，
这就增加了不必要的开销，因为 length 只是终止条件，并未参与实际运算。简化代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jquery</title>
    <style type="text/css">
    #info {
        color:#FF0000;
        height:150px;
    }
    </style>
</head>
<body>
    <div id="div1">
    <input value="5000" type="text" id="txt1"/><input type="button" id="btn1" value="生成 checkbox"/>
    <div id="info">
    <input type="button" id="btnTest1" onclick="fun1(this)" value="第一种"/><span></span><br/>
    <input type="button" id="btnTest1" onclick="fun2(this)" value="第二种"/><span></span><br/>
    <input type="button" id="btnTest1" onclick="fun3(this)" value="第三种"/><span></span><br/>
    </div>
    <div id="box"></div>
    </div>
</body>
<script type="text/javascript">
var g=function(id) {return document.getElementById(id);};
g("btn1").onclick=function() {
    var val=g("txt1").value-0;
    if(!isNaN(val)) {
        var box=g("box");
        box.innerHTML="";
        for(var i=0;i<val;i++) {
            var chk=document.createElement("input");
            chk.type="checkbox";
            box.appendChild(chk);
        }
    }
}
//这里为了简单就没有判断type
var fun1=function(obj) {//第一种直接在for中取数组长度
    var chks=g("box").getElementsByTagName("input");
    var b=!chks[0].checked;    var d=new Date();
    for(var i=0;i<chks.length;i++) {
        //chks[i].checked=b;
    }
    obj.nextSibling.innerHTML=new Date()-d;
}
var fun2=function(obj) {//第二种
    var chks=g("box").getElementsByTagName("input");
    var b=!chks[0].checked;    var d=new Date();
    for(var i=0;chks[i];i++) {
        //chks[i].checked=b;
    }
    obj.nextSibling.innerHTML=new Date()-d;
}
var fun3=function(obj) {//第三种将数组的长度放到一个局部变量中
    var chks=g("box").getElementsByTagName("input");
    var b=!chks[0].checked;
    var length=chks.length;
    var d=new Date();

    for(var i=0;i<length;i++) {
        //chks[i].checked=b;
    }
    obj.nextSibling.innerHTML=new Date()-d;
}
</script>
</html>
另，如果循环中需要多次访问 chks[i] 的话，就应该进一步优化，从而降低内部检索的开销。可以充分利用 js 的特性，不必读取 length，并将定位与赋值分离，优化代码如下L@_@K
var fun3=function(obj) {
    var chks=g("box").getElementsByTagName("input");
    var b=!chks[0].checked;    var d=new Date();
    for(var i=0,chk; chk=chks[i]; i++) {
        chk.checked=b;
    }
    obj.nextSibling.innerHTML=new Date()-d;
}
不错,不过我的浏览器不同。第一种chks.length是host object，第二种chks[i]属于native object，第三种是临时变量，理应是第二种最慢，第一种次之，第三种最快吧。代码写得很工整，吾佩服，虽然结果不一样。
var a = [];
for (var i = 0; i < 200000; i++)
a.push(i);

var start = new Date();
var n = 0;var start = new Date();
var n = 0;
for (var i = 0; i < a.length; i++)
{
n += a[i];
if (n > 0x40000000) n = 0;
}
document.writeln((new Date() - start) + "," + n);
document.writeln("<br />");var start = new Date();
var n = 0;
var len = a.length;
for (var i = 0; i < len; i++)
{
n += a[i];
if (n > 0x40000000) n = 0;
}
document.writeln((new Date() - start) + "," + n);
document.writeln("<br />");
IE7 执行结果：
1. 171ms
2. 141ms Firefox 2.0:
1. 296ms
2. 297msGoogle Chrome：
1. 7ms
2. 6ms显然 .length 没有多少开销
for(var i=0; a[i]; i++) 只用了0秒，因为一次也没执行
第一种之所以慢是因为访问集合的 length 属性时需要遍历 prototype.
我最近在看Ajax in Action 想请教下各位为什么给js函数时总用到prototype,例如
function Myobject(name,size){
    this.name=name;
    this.size=size;
}
Myobject.prototype.tellsize=function(){
    alert("size of"+ this.name+" is"+this.size);
}
var myObj = new MyObject("tiddles","7.6 meters")
myObj.tellSize();
书上说这么写是为了让js基于面对对象。可是我从在看这本书之前从来都没有这么使用过，请各位能说说都什么情况下才能用到prototype这个js属性。
哪有这个样的，分析出tip告诉大家，然后还散分，楼主RP太高啦
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=content-type Content='text/html;charset=utf-8'>
<style>
body{
margin:0;
padding:20;
font-size:14px;
background-color:#eee;
}#container{
border:solid 1px;
height:300px;
width:100%;
overflow:auto;
background-color:white;
color:darkblue;
}
hr{
color:#6e8;
size:5px;
}
</style>
</head>
<body>
<h1><center> 'string += another_string' versus 'array push'</center></h1><hr>value : <textarea id='str' > a short string </textarea><br>
times : <input type='text' id='times' value='10000' /><br>
<input type='button' id='btn_str' value='string add'/>
<input type='button' id='btn_ary' value='array push'/>
<input type='button' id='cls' value='clear'/>
<input type='text' id='tm_cost' value=0 /><br>
<hr>
<div id='container'></div>
<script type="text/javascript">//get a long long long string by string add another string;
$('btn_str').onclick = function () {

var s = $('str').value;
var n = parseInt($('times').value);
var o = $('container');
var result = ''; var t_1 = new Date(); for(var i = 0 ; i < n ; i++) {

result += s;

} $('tm_cost').value = new Date() - t_1;
o.innerHTML = result;

}$('cls').onclick = function () { $('container').innerHTML = ''; $('tm_cost').value = 0;
}
//get a long long long string by array push method;
$('btn_ary').onclick = function () { var s = $('str').value;
var n = parseInt($('times').value);
var o = $('container');
var ary = []; var t_1 = new Date(); for(var i = 0 ; i < n ; i++) { ary.push(s);

}
$('tm_cost').value = new Date() - t_1;
o.innerHTML = ary.join('');

}function $(id) {

return document.getElementById(id);}</script>
</body>
</html>
谢谢楼住分享,也感谢yixianggao的讲解
那是因为数组没有使用索引来访问，如果将访问数组改成：    for(var i = 0 ; i < n ; i++) {
        //ary.push(s);
        ary[i]=s;
    }在ie8下，第一种情况有时会是15，16毫秒
第二种情况就会全部是0了
通过这个小程序，我发现Google Chrome的运行速度比IE、火狐快多了，简直差上一个数量级啊！
有点意思
平时好像都是用array.length的
看来以后得考虑换种方式了.