私の10〜15ページのそれぞれには、100〜200行のjsが含まれています$(document).ready()
それらをすべて 1 つの外部ファイルに結合するのは賢明でしょうか? それがどのように機能するかわかりません。ブラウザーは、現在のページにない機能であっても、すべてを一度にチェックする必要があるのではないでしょうか? 2 番目の問題は、おそらく関数の競合です。
これを処理する方法についていくつかのヒントを教えてください。
私の10〜15ページのそれぞれには、100〜200行のjsが含まれています$(document).ready()
それらをすべて 1 つの外部ファイルに結合するのは賢明でしょうか? それがどのように機能するかわかりません。ブラウザーは、現在のページにない機能であっても、すべてを一度にチェックする必要があるのではないでしょうか? 2 番目の問題は、おそらく関数の競合です。
これを処理する方法についていくつかのヒントを教えてください。
jsファイルが大きくなりすぎた場合は、これらの行を複数のファイルに分割できます。
100〜200行は非常に小さいことに注意してください。サイズが本当に重要な場合は、コードを縮小する必要があります。
「私たちは小さな効率を忘れるべきです。たとえば、97%の確率で:時期尚早の最適化はすべての悪の根源です」
関数の競合に関しては、名前空間とクロージャを使用し、グローバルオブジェクトを可能な限りクリーンに保ちます。
調べなければならないことがいろいろあります。
最初にすべての js をパブリック cdn に削除して、ex jquery で使用できるようにします。次に、すべての js を常に縮小して 1 つのファイルに結合します (css にも同じことが当てはまります)。
ここでの利点は、10 個の js ファイルがある場合、ブラウザーが 10 個の要求を行い、各ファイルを個別に受信する必要があることです。モバイル デバイスのドメインあたりのリクエスト数については言うまでもありません。
一方、すべてのファイルが 1 つのファイルとして送信される場合、要求は 1 つだけです。実行に多くの時間がかかることは間違いありません (または、少なくともすべての準備ができているものをチェックすること) が、この処理時間は、ファイルが異なる場合に発生する要求時間よりもはるかに短くなります。
それは賢明でしょうか?はい。ブラウザにキャッシュ可能な大きなチャンクを 1 つ与えると、ページの読み込み速度が向上することを心配する必要がなくなります。すべての onload イベントを別の名前の関数に入れて関連するページから呼び出すか、同じことをする必要がある場合は別のページで関数を再利用します。