Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
反復処理に速さを求めて
Search
camcam_lemon
March 22, 2019
Programming
1
150
反復処理に速さを求めて
We Are JavaScripters @30thの登壇資料になります。
camcam_lemon
March 22, 2019
Tweet
Share
More Decks by camcam_lemon
See All by camcam_lemon
オレを実装してデザイン実装楽したい
lemon
0
39
要素のサイズを変えずに押しやすくする
lemon
0
70
iOSのキーボード入力ビューをカスタマイズする
lemon
0
240
視え方と文字の大きさ
lemon
1
400
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
290
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.9k
UI/UXデザイナーがデザインしてるもの
lemon
2
320
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
990
ESLintで始めるTypeScriptの静的解析
lemon
8
2.1k
Other Decks in Programming
See All in Programming
階層化自動テストで開発に機動力を
ickx
1
470
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1.1k
Go製CLIツールをnpmで配布するには
syumai
2
1.1k
実践 Dev Containers × Claude Code
touyu
1
130
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
560
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
450
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
4
2.4k
あのころの iPod を どうにか再生させたい
orumin
0
140
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
760
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
11
2.9k
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Site-Speed That Sticks
csswizardry
10
750
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Building Adaptive Systems
keathley
43
2.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
A designer walks into a library…
pauljervisheath
207
24k
How to train your dragon (web standard)
notwaldorf
96
6.2k
It's Worth the Effort
3n
185
28k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
Why Our Code Smells
bkeepers
PRO
337
57k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
The Language of Interfaces
destraynor
158
25k
Transcript
反復処理に速さを求めて We Are JavaScripters @30th
None
None
他にも色々な書き方がありますよね 何通りの実装方法があるか 皆さんご存知ですか?
None
全て同じ出力結果を得られます
ざっと連ねると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 install yarn 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
ご静聴ありがとうございました!