Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
反復処理に速さを求めて
Search
camcam_lemon
March 22, 2019
Programming
190
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
反復処理に速さを求めて
We Are JavaScripters @30thの登壇資料になります。
camcam_lemon
March 22, 2019
More Decks by camcam_lemon
See All by camcam_lemon
オレを実装してデザイン実装楽したい
lemon
0
95
要素のサイズを変えずに押しやすくする
lemon
0
110
iOSのキーボード入力ビューをカスタマイズする
lemon
0
350
視え方と文字の大きさ
lemon
1
480
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
350
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
5.1k
UI/UXデザイナーがデザインしてるもの
lemon
2
360
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
1.1k
ESLintで始めるTypeScriptの静的解析
lemon
8
2.2k
Other Decks in Programming
See All in Programming
3回つくってわかった、 定期実行ジョブ基盤の本質情報
takai
4
3.6k
Crash Auto Pipelines
veronikapj
1
320
ChromeでローカルLLM
ryu1013
0
190
現場と育てるRailsモデリング 〜Spreadsheetから始めたモデル設計〜
siroemk
2
1.2k
LLM 101
dalinaum
0
450
Optunaを作ったときにやりたかったこと、その後 (2026/10/16, Optuna Meetup #3)
iwiwi
4
1.4k
Lambda durable functionsでHuman in the Loopを楽に…楽に……
har1101
2
250
Coding with AI: How to trust the storyteller (AWS Community Day Adria, Ljubljana 2026)
slobodan
0
130
FactoryBotをやめればRSpecは速くなるのか?
yuta_onishi_97
0
1.3k
社内AIエージェント「Askワンバン」における コストチューニングの取り組み
t0yohei
0
120
Kotlinize Is Not Just Converting to Kotlin
chigichan24
1
210
パスワード再設定メールのURLについて知っておこう
uyuki234
0
210
Featured
See All Featured
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
550
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
520
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
74
43k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
1
650
How to Talk to Developers About Accessibility
jct
2
610
Visualization
eitanlees
153
17k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.8k
Typedesign – Prime Four
hannesfritz
42
3.2k
Git: the NoSQL Database
bkeepers
PRO
433
67k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
1
300
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
22k
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
ご静聴ありがとうございました!