JavaScript 數組、Object對象for迴圈效率對比

原來小航子（山山）跟我說過，多用object對象少用數組對象，因為object的效率要高一些，今天剛好在寫一個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>     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />     <title>Test Page</title> </head> <body>     <p style="color:#fff; background:red;">Object for-in-Loop Spend Time: <span id="oaTime" style="background:#000;"></span></p>     <p style="color:#fff; background:red;">Array for-Loop Spend Time: <span id="aaTime" style="background:#000;"></span></p>     <h2>Object Area</h2>     <div id="object-area"></div>     <h2>Array Area</h2>     <div id="array-area"></div>     <script type="text/javascript">     //<![CDATA         function randomString() {             var i = Math.ceil(Math.random() * 200),             a = new Array(i);             while(i--)                 a[i] = String.fromCharCode(Math.ceil(Math.random() * 40) + 30);             return a.join('');         };         var num = 1000;         var testObject = {}, testArray = [];         for (var i = 0; i < num; i++) {             var str = randomString();             testObject[i] = str;             testArray[i] = str;         }         var oa = document.getElementById('object-area'), aa = document.getElementById('array-area'), oat = document.getElementById('oaTime'), aat = document.getElementById('aaTime');         var startTime = new Date();         for (var name in testObject)             oa.innerHTML += testObject[name];         var endTime = new Date();         oat.innerHTML = endTime - startTime + 'ms';         var startTime = new Date();         for (var i = 0, length = testArray.length; i < length; i++)             aa.innerHTML += testArray[i];         var endTime = new Date();         aat.innerHTML = endTime - startTime + 'ms';     //]]>     </script> </body> </html>

實驗內容：測試內容主要是for迴圈，因為一般數組都是用for迴圈來遍曆數組元素，而object對象則應該用for..in迴圈來遍曆對象元素，所以主要測試思路就是給object和數組填充大量元素，然後分別測試他們遍曆、輸出的消耗時間。

實驗方法：簡單說一下實施方法，首先通過一個隨機產生字串的函數（每次產生字串長度在0-200個字元間），然後分別將產生字串存到object對象和數組對象中（通常要產生1000個上述字串），然後用innerHTML方法在頁面中輸出，計算遍曆、輸出時間。

說明：考慮用innerHTML方法輸出是因為效率比DOM方法高很多，而且這種效率提高有助於高效檢測，其次迭代輸出的時候用了 innerHTML += 的方法，雖然這樣效率很低，應該考慮用存到一個數組然後在.join('')產生字串輸出，但是考慮到將object轉存數組也有大量時間消耗，所以索性就選擇 innerHTML += 的方法輸出。

警告：由於此測試頁面計算量很大，容易造成瀏覽器佔用較高CPU，同時瀏覽器假死現象也可能出現，因此在進行測試的時候請確保瀏覽器沒有開啟未儲存頁面或沒有進行其他有可能造成損失的操作！

結論：1.經過幾次簡單的測試，發現通常情況下數組for迴圈效率要高於object for-in迴圈，且有時效率甚至高於50%以上，但是測試也發現，相反的結果頁可能出現幾次，但總體來看數組迴圈的效率是要高於object對象的for-in迴圈；
2.同時經過不同瀏覽器的測試，發現對於各瀏覽器的JavaScript引擎來說，Chrome 2的V8引擎最優秀，平均耗時很低，且假死現象輕微；其次是Opera，9.6它的速度和Chrome相對，稍慢一些，不過穩定性不如Chrome，過程中會出現“未響應”情況；第三應該是Safari 4 Beta，運算速度稍慢於Opera，但是較為穩定；第四應該歸屬IE8，運算速度慢於以上各瀏覽器，不過沒有假死現象；最後是Firefox 3.0.10，速度最慢，通常比IE8還慢很多，有時比IE8慢達200%！！看來Firefox 3.0的JavaScript引擎仍需提高啊~