JS ArrayのforEach, filter, map の速度を調べてみた。

javascript

最近のモダンブラウザのJS実装には、Array#forEach や filter, map などがビルトインされている。

jQuery とかの each使うより、ネイティブ実装のほうが早そう。しかし forEach、filter、map の速度に違いがあるのかちょと気になったので実験してみた。

環境は Mac OS X 10.7.4,  MacBook Air（Late 2010）

 

2012/06/22 追記:  −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

Sencha Touch, iPad等を追加しました → JavaScript の Array.forEach vs jQuery.each vs Ext.each

−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

100万個の配列にたいして、forEach と filter、map を実行して速度を比較した。コールバックの中身は同じ。それを10回やって、平均取ったのが以下の表。

Google Chrome 19.0.1084.56

#forEachfiltermapjQuery
1 365 350 258 59
2 123 106 335 62
3 192 105 351 62
4 187 107 561 66
5 181 101 325 94
6 175 101 323 68
7 186 100 324 62
8 178 99 322 66
9 178 108 354 57
10 234 115 362 58

 

Safari 5.1.7 (7534.57.2)

# forEach filter map jQuery
1 53 52 60 42
2 52 47 63 62
3 56 48 204 47
4 53 48 79 71
5 64 48 63 115
6 52 46 59 49
7 64 46 62 43
8 52 45 59 42
9 51 44 59 46
10 62 47 187 55

 

 

Safari はえーーー！！

 

jQuery.each はえーーーー！！！

 

jQuery はどちらのブラウザも早いですね。ネイティブのほうが早いと思い込んでいたけど、Chrome のネイティブ forEach はだめですね。。初回 forEach はなぜか必ず遅くなります。Safari ではそんなことない。

forEach と filter の比較をしようと思っていたんだけど、jQuery.each が早すぎて、もうこれでいいじゃんという予想外の結果に。

ネイティブをも凌駕するとは jQuery 恐ろしい子･･･