簡單的 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 迴圈的寫法:

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

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

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

 $.eachfor1for2for3for4
Firefox135836323133
Safari31117151716
Chrome25714172016

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

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