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"value="第一种"/><span></span><br/> <input type="button" id="btnTest1"value="第二种"/><span></span><br/> <input type="button" id="btnTest1"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); } } }//这里为了简单就没有判断typevar fun1=function(obj) {//第一种直接在for中取数组长度 var chks=g("box").getElementsByTagName("input"); var b=!chks.checked; var d=new Date(); for(var i=0;i<chks.length;i++) { //chks.checked=b; } obj.nextSibling.innerHTML=new Date()-d;}var fun2=function(obj) {//第二种 var chks=g("box").getElementsByTagName("input"); var b=!chks.checked; var d=new Date(); for(var i=0;chks;i++) { //chks.checked=b; } obj.nextSibling.innerHTML=new Date()-d;}var fun3=function(obj) {//第三种将数组的长度放到一个局部变量中 var chks=g("box").getElementsByTagName("input"); var b=!chks.checked; var length=chks.length; var d=new Date(); for(var i=0;i<length;i++) { //chks.checked=b; } obj.nextSibling.innerHTML=new Date()-d;}</script></html>第一种：每次循环读取 chks 集合的属性 length；
第二种：每次循环定位 chks；
第三种：每次循环读取 变量 length。
-----------------------------------------------
第一种：406 ms
第二种：16 ms
第三种：0 ms
--------------------------------
第三种直接读取变量速度最快，第二种集合定位次之，第一种最慢，
每种之间相差一个数量级。
----------------------------------------------------
第一种之所以慢是因为访问集合的 length 属性时需要遍历 prototype，从而获取 length，
这就增加了不必要的开销，因为 length 只是终止条件，并未参与实际运算。
----------------------------------------------------
另，如果循环中需要多次访问 chks 的话，就应该进一步优化，从而降低内部检索的开销。
可以充分利用 js 的特性，不必读取 length，并将定位与赋值分离，优化代码如下 :
var fun3=function(obj) { var chks=g("box").getElementsByTagName("input"); var b=!chks.checked; var d=new Date(); for(var i=0,chk; chk=chks; i++) { chk.checked=b; } obj.nextSibling.innerHTML=new Date()-d;}
页:
[1]