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
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
86
要素のサイズを変えずに押しやすくする
lemon
0
97
iOSのキーボード入力ビューをカスタマイズする
lemon
0
320
視え方と文字の大きさ
lemon
1
470
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
330
フロントエンドにおけるアーキテクチャとの向き合い方
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
AIが無かった頃の素敵な出会いの話
codmoninc
1
210
全PRの83%がAIレビューだけでマージできるようになった開発組織はその後どうなったか
athug
0
300
共通化で考えるべきは、実装より公開する型だった
codeegg
0
270
Generative UI & AI-Assistants for Your Angular Solutions
manfredsteyer
PRO
0
120
エンジニアにデザインハーネスを 〜デザインプロセスを規定するためのハーネス〜 / Design harness from an engineer's perspective
rkaga
2
1.6k
Hatena Engineer Seminar #37「言語モデルの活用に関する研究」
slashnephy
0
540
ITヒヤリハットを整理してみた ~ライフサイクルと原因から考える再発防止策~
koukimiura
1
110
Prismを使った型安全な暗号化_関数型まつり2026
_fhhmm
0
150
地域 SRE コミュニティ最前線 - ホンマでっかSRE勉強会
tk3fftk
0
270
Apache Hive: そしてCloud Native Lakehouseへ
okumin
1
170
ルールを書いて終わらせないハーネスエンジニアリング
yug1224
4
1.7k
【やさしく解説 設計編 #1】「ドメイン駆動」と「実装駆動」ってなに? 〜設計の考え方を、たとえ話で学ぼう〜
panda728
PRO
1
120
Featured
See All Featured
Side Projects
sachag
455
43k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
190
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
1
410
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
64
56k
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
410
ラッコキーワード サービス紹介資料
rakko
1
4M
YesSQL, Process and Tooling at Scale
rocio
174
15k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
470
Between Models and Reality
mayunak
4
380
How to Talk to Developers About Accessibility
jct
2
430
The untapped power of vector embeddings
frankvandijk
2
1.8k
Tell your own story through comics
letsgokoyo
1
1k
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
ご静聴ありがとうございました!