We Are JavaScripters @30thの登壇資料になります。
反復処理に速さを求めてWe Are JavaScripters @30th
View Slide
他にも色々な書き方がありますよね何通りの実装方法があるか皆さんご存知ですか?
全て同じ出力結果を得られます
ざっと連ねると18通り- 基本構文: for, while, do-while- イテレーション: for...of, for...in- コレクション: Map(forEach), Set(forEach), Set(for...of)- Array.prototype: forEach, map, reduce- Library: ・jQuery: each・underscore: each, map, reduce・lodash: forEach, map, reduce他Libraryを含めばもっともっとあるはず
この中で1番つえーやつはどいつだ?
天下一武道会を開催することにした
会場:ルール:その他:純粋な実行スピード 平均実行速度“要素内の数値を全て計算し合計値を返すまでの処理時間を計測”この処理を反復(100000)してサイズ(10〜100000)ごとに(TOP3の順位)と を求める配列とコレクションの生成時間は実行時間に含めないGoogle Chrome(V8)
https://github.com/camcam-lemon/LoopPerfomanceSimulatorデモ用のサンプルyarn installyarn start
for...inは予選落ち圧倒的に遅いので除外
いざ開幕!
平均実行速度実行スピードサイズ10 : ループ10
・どの処理もTOP3になる実行スピード平均実行速度明確な差は見られない・サイズ10 : ループ10
平均実行速度実行スピードサイズ10 : ループ100000
どのAPIを使っても良さそう・Libraryの処理は標準APIに比べて若干遅い・速度の違いはあれど誤差の範疇(ミリ秒単位の話)平均実行速度トップを取った回数に劇的な差は見られない・while構文が速い!!・ (do-while ≧ while > for? )実行スピードサイズ10 : ループ100000
平均実行速度実行スピードサイズ100 : ループ100000
平均実行速度実行スピード目立った変化はないサイズ100 : ループ100000
実行スピード平均実行速度サイズ1000 : ループ100000
サイズ1000 : ループ100000平均実行速度実行スピードjQuery.eachが突然速くなる
サイズが大きくなると各APIの特色が出始めるコレクションはfor...ofで回せるSetが頭1つ飛び出た速度を出す・jQuery.eachどうした!?・reduceとforEachが健闘してる中、mapは失速してきた・for...ofは基本構文とほぼ同等の速度を維持・基本構文がトップを独占・平均実行速度while強い・90000 => 70000 第とブレが生じ始める・実行スピードサイズ1000 : ループ100000
サイズ10000 : ループ100000実行スピード平均実行速度
1000 => 10000 に大きな違いは見られないjQueryは安定した速度を維持・実行スピードはfor文が速いが平均速度で見ると違いは極わずか・平均実行速度メンツは変わらず・実行スピードサイズ10000 : ループ100000
サイズ100000 : ループ100000実行スピード平均実行速度
jQuery強し・逆にmapはサイズが大きくなるほど弱くなる・Array.prototypeはサイズが大きくなるほどreduceが強くなる・for...ofと基本構文が速い・平均実行速度わずかだがfor...ofがwhileを上回る・while属強し・実行スピードサイズ100000 : ループ100000
サイズを大きくすればするほど違いが顕著に表れてくる結果になった
jQuery.eachすげえ(1番予想外だった)・Array.prototypeはreduceが頭1つ飛び抜けた強さ・コレクションはfor...ofが使えるSetが強い・for-ofはサイズが大きくなればなるほど強くなる・基本構文はサイズによらずハイパフォーマンス・まとめ
反復処理はその場に適したAPIを使いましょうハイパフォーマンスな実装 質の良いコード≠
優勝は・・・
do-while
ご静聴ありがとうございました!