web-dev-qa-db-ja.com

javascriptファイルがすべて1つのファイルに結合されている場合、それらのファイルの順序は重要ですか？

多くの（人気のある）javascriptsファイルが外部およびローカルにロードされる今日の現代では、javascriptsファイルが呼び出される順序特にすべてのローカルファイルがすべて1つに結合（縮小）される場合に重要ですファイル？

さらに、多くの人がJavascriptを ページの下部 に入れるべきだと主張していますが、他の人はjavascriptを頭に残すのが最善だと言います。いつどちらをすべきですか？ありがとう！

google cdn latest jquery js              | external
another cdn loaded javascript js         | external

TabScript  ...js          \
GalleryLightbox  ...js     \
JavascriptMenu  ...js       \
HTMlFormsBeautifier ...js    > all minified and combined into one .js file!
TextFieldResize  ...js      /
SWFObjects  ...js          /
Tooltips ...js            /
CallFunctions   ...js    /
javascriptdomperformancehttprequest
28
Sam

次の状況の1つ以上で、注文が重要になる可能性があります。

  • スクリプトの1つに別のスクリプトへの依存関係が含まれている場合。
  • スクリプトがHEADではなくBODYにある場合。。 UPDATE：HEAD vsBODYは違いがないようです。順序が重要です。期間。
  • 別のスクリプトへの依存を必要とするグローバル名前空間でコードを実行している場合。

これらの問題を回避する最善の方法は、グローバル名前空間のコードが$(document).ready()ラッパー内にあることを確認することです。グローバル名前空間のコードは、実行されたコードを最初に定義する必要がある順序でロードする必要があります。

FirebugまたはChrome DebuggerでJavaScriptエラーコンソールをチェックすると、スクリプトで何が壊れているかがわかり、新しいセットアップで何を変更する必要があるかを知ることができます。

通常、ページの読み込み、クリック、ノードの挿入または削除などのイベントに基づいて関数が呼び出されるかどうかは関係ありません。ただし、グローバル名前空間のイベントの外部で関数呼び出しが行われると、問題が発生します。このコードを検討してください：

JSファイル：mySourceContainingEvilFunctionDef.js

function evilGlobalFunctionCall() {
    alert("I will cause problems because the HTML page is trying to call " +
      "me before it knows I exist...  It doesn't know I exist, sniff :(  ");
}

HTML：

    <script>
        evilGlobalFunctionCall();  // JS Error - syntax error 
    </script>
    <!-- Takes time to load -->
    <script type="text/javascript" src="mySourceContainingEvilFunctionDef.js"></script>
...

いずれにせよ、上記のヒントはこれらのタイプの問題を防ぐのに役立ちます。

補足として、ブラウザの非同期性を利用してリソースをプルダウンすることには、特定の速度上の利点があることを考慮する必要があります。 Webブラウザーでは、一度に最大4つの非同期接続を開くことができます。つまり、1つの大規模なスクリプトのロードに、同じスクリプトよりも時間がかかる可能性があります チャンクに分割 ！ Yahoo Research もあります。これは、スクリプトを組み合わせると結果が速くなることを示しているため、結果は状況によって異なります。

複数のHTTP接続を開いたり閉じたりするのにかかる時間と、複数の非同期接続ではなく単一の接続に制限することで失われる時間のバランスであるため、状況に最適なものを確認するために、側でテストを行う必要がある場合があります。すべての接続を開くのにかかる時間は、ブラウザがすべてのスクリプトを非同期でダウンロードでき、接続の開閉の遅延を超える可能性があるという事実によって相殺される可能性があります。

そうは言っても、ほとんどの場合、スクリプトを組み合わせると、速度が最も速く向上する可能性が高く、ベストプラクティスと見なされます。

29
jmort253

はい、あなたが何をするかに大きく依存します。

たとえば、_a.js_が...

_var a = function() {
   alert('a');
}
_

...そして_b.js_は...

_a()
_

...その場合、_b.js_の前に_a.js_を含めたくないでしょう。そうしないと、a()は使用できなくなります。

これは関数式にのみ適用されます。宣言はその範囲の一番上に引き上げられます。

JQueryを組み合わせる必要があるかどうかについては、Googleがホストするコピーを使用する方がよいと思います。結合したファイルに追加すると、ファイルがクライアント用に既にキャッシュされている可能性が高い場合に、jQueryが大きくなります。

7
alex

ブラウザがスクリプトファイルをロードして実行する方法に関するいくつかの貴重な情報については、 webkitチームからのこの投稿 をお読みください。

通常、パーサーが外部スクリプトを検出すると、解析が一時停止され、スクリプトのダウンロード要求が発行され、スクリプトが完全にダウンロードされて実行された後にのみ解析が再開されます。

したがって、通常（これらの非同期属性または延期属性なしで）、スクリプトはソースコードで指定された順序でexcutedを取得します。 しかしスクリプトタグが<head>にある場合、ブラウザは実行を開始する前にすべてのスクリプトがロードされるのを最初に待機します何でも。

これは、スクリプトが複数のファイルに分割されているかどうかに関係がないことを意味します。

4
Jannes

私があなたの質問を理解しているなら、関数/メソッドがファイルのどこで定義されているかが重要であり、答えがノーであるかどうかを尋ねていると思います。単一のソースファイルのどこにでも定義できます。 JavaScriptパーサーは、コードを実行する前にすべてのシンボルを読み込みます。

1
Andrew Noyes

同じ名前の変数または関数を定義する2つのファイルがある場合、それらが含まれる順序によって、実際に定義されているものが変わります。

1
user122299