JavaScriptのfor/forEach/jQuery.each/Ext.each のパフォーマンスを計ってみた。
先日、Sencha Touch 2 ソースコード読書会 第2回@東京でナビゲータを務めさせて頂きました。その時の様子は以下などに。
- Sencha Touch 2 ソースコード読書会 第2回レポート
- 読んだ内容読んだ内容
この中で、Array.forEachと Ext.each のどちらがどのくらい速いのか、というのが話題に出ました。そういえば昔、JS ArrayのforEach, filter, map の速度を調べてみた。というエントリで調べました。あれから1年くらい立ってるんだけど、最近はどうなのかまた調べてみました。
jsfiddle を使って、生のfor文、Array.forEach、Ext.each、jQuery.each の比較ができるようにしました。
http://jsfiddle.net/dsuket/DR33Q/
配列に0から指定数まで数字を入れて、ループでそれらを足し合わせる計算時間を測定しています。私の環境（iMac Early 2009 ）だと 1000万回くらいから差が出てきました。以下は OS X 10.8.3/Chromeで、各五回実行した最小の測定結果。単位は ミリ秒。
Chrome 27.0.1453.93
| 回数 | for | forEach | jQuery.each | Ext.each |
| 100万 | 0 | 7 | 11 | 10 |
| 1000万 | 2 | 106 | 156 | 149 |
| 1億 | 20 | 762 | 1284 | 1189 |
for文が圧倒的に速いですね。jQuery や Ext の each は ネイティブの forEach に比べると 60%程遅いようです。あと、なぜか jQuery より Ext のほうが何回やってもちょっとだけ速い！
FireFox 21.0
| 回数 | for | forEach | jQuery.each | Ext.each |
| 100万 | 0 | 2 | 4 | 2 |
| 1000万 | 3 | 15 | 30 | 15 |
| 1億 | 51 | 138 | 322 | 141 |
Safari 6.0.4 (8536.29.13)
| 回数 | for | forEach | jQuery.each | Ext.each |
| 100万 | 6 | 27 | 22 | 25 |
| 1000万 | 68 | 265 | 256 | 257 |
| 1億 | 680 | 2915 | 2460 | 2507 |
FireFox 速い！forEach がかなり速いですね。Ext.eachも負けないくらい速いです。それに比べ、Safari はループが遅い上に、初期化もすごく時間かかりました。さらに、Safariにはとんでもないバグがあることがわかりました。。
その話はまた次のエントリで。
→ 書きました！ JavaScriptのfor/forEach/jQuery.each/Ext.each のパフォーマンスを計ってみた。
