Tweet
Tweet

Slide 1

Slide 1 text

反復処理に速さを求めて We Are JavaScripters @30th

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

他にも色々な書き方がありますよね 何通りの実装方法があるか 皆さんご存知ですか？

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

全て同じ出力結果を得られます

Slide 7

Slide 7 text

ざっと連ねると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を含めばもっともっとあるはず

Slide 8

Slide 8 text

この中で1番つえーやつはどいつだ？

Slide 9

Slide 9 text

天下一武道会を開催することにした

Slide 10

Slide 10 text

会場： ルール： その他： 純粋な実行スピード 平均実行速度 “要素内の数値を全て計算し合計値を返すまでの処理時間を計測” この処理を反復(100000)してサイズ(10〜100000)ごとに (TOP3の順位)と を求める 配列とコレクションの生成時間は実行時間に含めない Google Chrome（V8）

Slide 11

Slide 11 text

https://github.com/camcam-lemon/LoopPerfomanceSimulator デモ用のサンプル yarn install yarn start

Slide 12

Slide 12 text

for...inは予選落ち 圧倒的に遅いので除外

Slide 13

Slide 13 text

いざ開幕！

Slide 14

Slide 14 text

平均実行速度 実行スピード サイズ10 : ループ10

Slide 15

Slide 15 text

・どの処理もTOP3になる 実行スピード 平均実行速度 明確な差は見られない ・ サイズ10 : ループ10

Slide 16

Slide 16 text

平均実行速度 実行スピード サイズ10 : ループ100000

Slide 17

Slide 17 text

どのAPIを使っても良さそう ・Libraryの処理は標準APIに比べて若干遅い ・速度の違いはあれど誤差の範疇(ミリ秒単位の話) 平均実行速度 トップを取った回数に劇的な差は見られない ・ while構文が速い！！ ・ (do-while ≧ while > for？ ) 実行スピード サイズ10 : ループ100000

Slide 18

Slide 18 text

平均実行速度 実行スピード サイズ100 : ループ100000

Slide 19

Slide 19 text

平均実行速度 実行スピード 目立った変化はない サイズ100 : ループ100000

Slide 20

Slide 20 text

実行スピード 平均実行速度 サイズ1000 : ループ100000

Slide 21

Slide 21 text

サイズ1000 : ループ100000 平均実行速度 実行スピード jQuery.eachが突然速くなる

Slide 22

Slide 22 text

サイズが大きくなると各APIの特色が出始める コレクションはfor...ofで回せるSetが頭1つ飛び出た速度を出す ・ jQuery.eachどうした！？ ・ reduceとforEachが健闘してる中、mapは失速してきた ・ for...ofは基本構文とほぼ同等の速度を維持 ・ 基本構文がトップを独占 ・ 平均実行速度 while強い ・ 90000 => 70000 第とブレが生じ始める ・ 実行スピード サイズ1000 : ループ100000

Slide 23

Slide 23 text

サイズ10000 : ループ100000 実行スピード 平均実行速度

Slide 24

Slide 24 text

1000 => 10000 に大きな違いは見られない jQueryは安定した速度を維持 ・ 実行スピードはfor文が速いが平均速度で見ると違いは極わずか ・ 平均実行速度 メンツは変わらず ・ 実行スピード サイズ10000 : ループ100000

Slide 25

Slide 25 text

サイズ100000 : ループ100000 実行スピード 平均実行速度

Slide 26

Slide 26 text

jQuery強し ・ 逆にmapはサイズが大きくなるほど弱くなる ・ Array.prototypeはサイズが大きくなるほどreduceが強くなる ・ for...ofと基本構文が速い ・ 平均実行速度 わずかだがfor...ofがwhileを上回る ・ while属強し ・ 実行スピード サイズ100000 : ループ100000

Slide 27

Slide 27 text

サイズを大きくすればするほど違いが 顕著に表れてくる結果になった

Slide 28

Slide 28 text

jQuery.eachすげえ(1番予想外だった) ・ Array.prototypeはreduceが頭1つ飛び抜けた強さ ・ コレクションはfor...ofが使えるSetが強い ・ for-ofはサイズが大きくなればなるほど強くなる ・ 基本構文はサイズによらずハイパフォーマンス ・ まとめ

Slide 29

Slide 29 text

反復処理はその場に適したAPIを使いましょう ハイパフォーマンスな実装 質の良いコード ≠

Slide 30

Slide 30 text

優勝は・・・

Slide 31

Slide 31 text

do-while

Slide 32

Slide 32 text

ご静聴ありがとうございました！