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
180
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
89
要素のサイズを変えずに押しやすくする
lemon
0
100
iOSのキーボード入力ビューをカスタマイズする
lemon
0
340
視え方と文字の大きさ
lemon
1
470
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
340
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
5.1k
UI/UXデザイナーがデザインしてるもの
lemon
2
350
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
1.1k
ESLintで始めるTypeScriptの静的解析
lemon
8
2.2k
Other Decks in Programming
See All in Programming
Go × SIMDで高速化するベクトル検索 ~ルーフラインモデルでSIMDが効く境界を探れ! ~
po3rin
1
1.6k
iOSDC Japan 2026 - Swiftで作って学ぼう!データベース自作入門
kaseken
2
170
20260914 AIエージェント時代のPlatform Engineering LLM基盤とプロダクトの責務境界線
kanfab1
7
2.1k
仕様駆動開発による爆速プロダクト開発 / Bakusoku Spec Driven Development
kobakei
0
120
Streamlitで実現する自然言語データアプリ開発
ayumu_yamaguchi
1
290
AI Agent時代のリアーキテクチャ戦略と実践
hokaccha
9
4.7k
WebMCP Challenge に星空観察アプリで参加した話
okajun35
0
180
AI に Inclusive UI を書かせよう — Design Rules Skill で Compose UI を作り直す
theoriatec2024
1
490
AHC070解法紹介
eijirou
0
120
Intent as Code
shoppingjaws
6
1k
AGENTS.md Is Not Enough:Build Skills, Don't Download Them
lx_t
0
120
App Storeの外へ──日本のiOSサイドローディング入門 for iOSDC Japan 2026
yuukiw00w
0
220
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
699
190k
AI Search: Where Are We & What Can We Do About It?
aleyda
0
7.9k
Design in an AI World
tapps
1
320
The SEO identity crisis: Don't let AI make you average
varn
0
560
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
480
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
590
Designing Dashboards & Data Visualisations in Web Apps
destraynor
232
55k
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
3.1k
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
6.2k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
2
280
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
2
700
Leading Effective Engineering Teams in the AI Era
addyosmani
9
2.6k
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
ご静聴ありがとうございました!