読者です 読者をやめる 読者になる 読者になる

JavaScriptのfor/forEach/jQuery.each/Ext.each のパフォーマンスを計ってみた。

先日、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 のほうが何回やってもちょっとだけ速い!

FireFoxSafariでもやってみました。

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 のパフォーマンスを計ってみた。