簡單的 Javascript 迴圈效能比較

比較 jQuery.each 與各種 for 迴圈的寫法在執行效能上的差別。主要是想知道，用在一般簡單陣列（而不是由 jQuery 生成的元素列表）時，會有多少程度的差別。

Benchmark 的網頁在 http://gugod.github.com/js-loop-benchmark/ ，打開網頁就會自動執行。

計算的題目為：取得陣列 a = [1,2,3,4,5,6,7,8,9,10] 內容的總和。主要比的對象是 jQuery 的 each，以及以下四種 for 迴圈的寫法：

for (i = 0, l = a.length; i < l; i += 1)
for (i = 0, l = a.length; i < l; i++)
for (i = 0; i < a.length; i += 1)
for (i = 0; i < a.length; i++)

這五種不同的程式碼各會被執行十萬次，並取得所需的時間總和。

在我本人的 Mac Safari5, Chrome5, Firefox 3.6.8 上執行，取得的數值如下 (數值為時間，單位為毫秒，數字愈小表示效能愈好)：


	$.each	for1	for2	for3	for4
Firefox	1358	36	32	31	33
Safari	311	17	15	17	16
Chrome	257	14	17	20	16

可以看出，在此例中，Firefox 執行 $.each 的效能相對於 for 迴圈真是特別的差，少說有 36 倍慢。而不同寫法的 for 迴圈在不同瀏覽器的效果則各有長短，但並沒有一種寫法是保証在所有瀏覽器上都會比較快。事先以變數把陣列長度存下來的這個做法 (for1, for2) 似乎也沒有想像中的有效。

不過這個結果有效前提自然是在迴圈迭代的對象是陣列之時。在瀏覽器的執行環境中常有一些不是陣列，卻有類似行為的物件，例如：arguments、document.getElementsByTagName 的傳回值。這四種迴圈迭代的效能比較如何，則需再仔細研究。