代码如下:
1 <div id="msg1">msg</div> 2 <div id="msg2">msg</div> 3 <script> 4 function $(d){ 5 return document.getElementById(d); 6 } 7 var TimeWast = function () { 8 var timeStart; 9 this.Start = function () { 10 timeStart = new Date(); 11 } 12 this.wast = function () { 13 var retVal = new Date().getTime() - timeStart.getTime(); 14 timeStart = new Date(); 15 //console.log("---------------- " + retVal + " ms ----------------\n"); 16 return retVal 17 } 18 } 19 20 var arr = new Array(100000000); 21 22 var timeWast = new TimeWast(); 23 timeWast.Start(); 24 var len = arr.length; 25 for (var i = 0; i < len ; i++) { 26 var a2 = 1; 27 } 28 $('msg1').innerHTML = timeWast.wast() + " ms len = arr.length<br/>" ; 29 30 var timeWast = new TimeWast(); 31 timeWast.Start(); 32 for (var i = 0; i < arr.length ; i++) { 33 var a2 = 1; 34 } 35 $('msg2').innerHTML = timeWast.wast() + " ms i < arr.length\n" ; 36 37 </script>
结果如下:
本人PC:i5-2320 3.00GHz,2G内存。
可以看出:总体来说,firefox是最牛的,其次是谷歌,Safari与IE差不多了,移动设备上的Safari表现更差(1200+和4000+ms),当然这受到硬件的影响。
都是循环1亿次,但是两个循环的判断条件稍有区别,下面一个是直接度数组的length属性,而第一个结果是先把length赋给一个变量。经过多次测试,奇怪的是几乎所有浏览器都是后面一个速度更慢,但firefox上面一个速度还慢一点点,当循环次数更大区别就更大,当为10亿次时,区别达到100ms快,还有一个现象的是,opera对两者处理的区别达到4倍几乎。
如下图:
我猜想这可能是每个浏览器对数组的length属性处理不一样造成的。