反復処理に速さを求めて

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

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