Q&A
https://teratail.com/help#resolve-question
JavaScriptで関数分割を細かくすると、関数呼び出しに掛かる時間によって、ブラウザへの表示などが遅くなったりしますか？
遅くなりそうな気がして、あまり関数分割をしないようにしています。
どうなのでしょうか。
教えて頂けると幸いです。
すみません、まだ回答を募集中です。
自分が何回か試したところ、平均すると関数分割をしたほうが若干遅いような雰囲気でしたが、関数分割をしたのに、しないより高速なときもあり、正直なところよくわかりませんでした。
掛かった時間もまちまちでした。
どんな要素が影響していて、このような結果になるのでしょう。
体感の話が出てますが、どれくらいまでなら関数分割しても問題ないのでしょうか（前提条件も踏まえて）。
まだまだ、わからないので、回答待ちです。
では、既存の回答にコメントを返して、「あなたが求める回答」との差分を明確にして下さい。
> どんな要素が影響していて、このような結果になるのでしょう
JavaScriptの実行環境の裏には「処理速度の誤差を当然に生み出す仕組み」があります。「C言語 メモリ解放」や「C言語 malloc free」を調べ、その上で「ガベージコレクタ」を調べてみてください。
JavaScriptのパフォーマンスに着目するなら、 think49 さんの回答が最も詳しいですね。
回答5件
0
関数分割
理論上は、一つの関数を複数の関数に分割すれば、遅くなります。
単純な「処理の分割」「処理の結合」では差が出にくいかもしれませんが、関数が少なければ少ないほど、コード最適化で密結合となり、パフォーマンス上は優位になります。
密結合を追求したコード事例として、下記を紹介しておきます。
- JavaScript - 配列で特定位置の周囲の値を効率よく調べたい アルゴリズム｜teratail
- benchmark - create-square-aa-1.0.1.js - JSFiddle - Code Playground
前提条件
速度を決定する要素はいくつかあります。
- 実行するPC
- JavaScriptを実行するアプリケーション(Webブラウザ)
- 実行するコード
現存の回答では「体感できないレベルの差」とあり、その考えは理解できるものですが、それも
- 回答者が今までに実行したPC
- 回答者が今までに実行したWebブラウザ
- 回答者が今までに実行したコード
という「回答者の前提条件」があります。
torimingoさんと回答者の前提条件は異なる為、torimingoさんの環境では結果がひっくり返る可能性があります。
実測する
条件が全て torimingo さんの手元に揃っている以上、「自分のPCで、自分が書いたコードを実行して、速度を計測する」のが最も確実です。
速度差の原因は、コードの実行範囲を狭くしたり、実行するコードを少し変えたバージョンを用意して、「比較検証」すれば、結果が出ます。
不具合のトラブルシューティングと違い、数値で明白な結果が返ってくるので、切り分けの練習としてもちょうど良いと思います。
Re: torimingo さん
投稿2020/05/24 12:03
編集2020/05/24 12:43総合スコア18170
「関数分割」の節に「密結合を追求したコード事例」を追記しました。
>>結果がひっくり返る可能性があります。
環境によって、関数分割をした方が早かったり、しない方が早かったりするという意味でしょうか？
他の回答者がいわれる、体感できないくらいは遅くなりますといった旨の回答を否定しているということでしょうか？
PCやブラウザは、実行速度には影響すると思いますが、関数分割するしないの速度の差分に影響する要素には、どのようなものがありますか？
様々な前提条件を飛ばしていて、「比較する意味がない」ということです。
あなたのコートと回答者のコードは異なります。
あなたが試している「現在」と回答者が試した「過去」では、実行するブラウザ、PCのスペック、回線速度が違います。
ブラウザかアップデートされて、最適化度合いか変わっているかもしれません。
PCスペックの向上で個体差か広がっているかもしれません。
回答者とあなたの間で合意をとるには、あなたが書いた比較コードと実行している環境を詳細に書き、回答者の環境で再現性を確認してもらうことです。
https://ja.stackoverflow.com/help/minimal-reproducible-example
比較条件が関数分割だけでは範囲が広すぎます。
調査は現実的に不可能です。
think49さんの回答をまとめると、「関数分割をしても実行速度が低下するかは環境に依存するのでわからない」ということになりますか？
0
細かくて、効果の薄い最適化は最後の最後でいいと思います。（苦労の割に効果は薄い。今回の件は体感できないどころか、ベンチマークでも差は出ないくらいかと。）
アルゴリズムによる最適化、高速化は桁が変わるほど早くなることが有ります。
まずはメンテしやすい様に組んで、全体が固まってから、呼び出し回数が多いルーチンだけに
細かい最適化を施しても良いと思います。
投稿2020/05/24 10:18
編集2020/05/27 03:11
総合スコア2826
0
1行1関数のような病的なことをしない限り、体感できないでしょう。
投稿2020/05/24 10:10
総合スコア84798
0
体感できるぐらい遅くできたらむしろ凄い、というレベルです。
投稿2020/05/24 10:05
総合スコア8949
0
JavaScriptで関数分割を細かくすると、関数呼び出しに掛かる時間によって、ブラウザへの表示などが遅くなったりしますか？
コード内容によるでしょう。
遅くなりそうな気がして、あまり関数分割をしないようにしています。
「感覚」で考えがちですが、パフォーマンスを理由とする場合は、例えば for(let i=0; i<100000; i++){ /* repeat testing */ } を書きまくって、調査した「msecの結果」で議論すべきです。
ネイティブ実装された関数（メソッド）もreturn されるまでの間はコールスタックに積み込まれますので、詳細な記録を取るまでのコストをかける必要があります。
感覚で議論するなら、可読性を重視します。
qiita 関数の分け方 の発信される内容（Java の例のようですが）があるように同様の悩みは皆が持っています。
JavaScriptのスタイルガイドに従った上で、１つの関数内は 20行×80桁に収まるように書くほうが好きです（必要ならHelper関数を書く派です）。
投稿2020/05/24 10:26
総合スコア5434
あなたの回答
tips
プレビュー
