Upgrade to Pro — share decks privately, control downloads, hide ads and more …

反復処理に速さを求めて

 反復処理に速さを求めて

We Are JavaScripters @30thの登壇資料になります。

camcam_lemon

March 22, 2019
Tweet

More Decks by camcam_lemon

Other Decks in Programming

Transcript

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

    View Slide

  2. View Slide

  3. View Slide

  4. 他にも色々な書き方がありますよね
    何通りの実装方法があるか

    皆さんご存知ですか?

    View Slide

  5. View Slide

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

    View Slide

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

    View Slide

  8. この中で1番つえーやつはどいつだ?

    View Slide

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

    View Slide

  10. 会場:
    ルール:

    その他:
    純粋な実行スピード 平均実行速度
    “要素内の数値を全て計算し合計値を返すまでの処理時間を計測”

    この処理を反復(100000)してサイズ(10〜100000)ごとに

    (TOP3の順位)と を求める
    配列とコレクションの生成時間は実行時間に含めない
    Google Chrome(V8)

    View Slide

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

    yarn start

    View Slide

  12. for...inは予選落ち

    圧倒的に遅いので除外

    View Slide

  13. いざ開幕!

    View Slide

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

    View Slide

  15. ・どの処理もTOP3になる
    実行スピード
    平均実行速度
    明確な差は見られない

    サイズ10 : ループ10

    View Slide

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

    View Slide

  17. どのAPIを使っても良さそう
    ・Libraryの処理は標準APIに比べて若干遅い
    ・速度の違いはあれど誤差の範疇(ミリ秒単位の話)
    平均実行速度
    トップを取った回数に劇的な差は見られない

    while構文が速い!!
    ・ (do-while ≧ while > for? )
    実行スピード
    サイズ10 : ループ100000

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  22. サイズが大きくなると各APIの特色が出始める
    コレクションはfor...ofで回せるSetが頭1つ飛び出た速度を出す

    jQuery.eachどうした!?

    reduceとforEachが健闘してる中、mapは失速してきた

    for...ofは基本構文とほぼ同等の速度を維持

    基本構文がトップを独占

    平均実行速度
    while強い

    90000 => 70000 第とブレが生じ始める

    実行スピード
    サイズ1000 : ループ100000

    View Slide

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

    View Slide

  24. 1000 => 10000 に大きな違いは見られない
    jQueryは安定した速度を維持

    実行スピードはfor文が速いが平均速度で見ると違いは極わずか

    平均実行速度
    メンツは変わらず

    実行スピード
    サイズ10000 : ループ100000

    View Slide

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

    View Slide

  26. jQuery強し

    逆にmapはサイズが大きくなるほど弱くなる

    Array.prototypeはサイズが大きくなるほどreduceが強くなる

    for...ofと基本構文が速い

    平均実行速度
    わずかだがfor...ofがwhileを上回る

    while属強し

    実行スピード
    サイズ100000 : ループ100000

    View Slide

  27. サイズを大きくすればするほど違いが

    顕著に表れてくる結果になった

    View Slide

  28. jQuery.eachすげえ(1番予想外だった)

    Array.prototypeはreduceが頭1つ飛び抜けた強さ

    コレクションはfor...ofが使えるSetが強い

    for-ofはサイズが大きくなればなるほど強くなる

    基本構文はサイズによらずハイパフォーマンス

    まとめ

    View Slide

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

    View Slide

  30. 優勝は・・・

    View Slide

  31. do-while

    View Slide

  32. ご静聴ありがとうございました!

    View Slide