3

私は自分のウェブページで使用している多くの（ほぼ15の）javascriptファイルを持っています。これらすべてのファイルを含めるための最良の方法は何ですか？

単に一番下にありますか、それともJavaScriptをより速くロードできる他のテクニックを使用する必要がありますか？

4

5 に答える 5

2

それらを組み合わせて縮小することができます。YUI Compressorならそれができます。

于 2012-04-17T10:28:27.163 に答える
1

Google Closure Compiler には、すべての js をマージおよび縮小するための便利な Web API があります。 https://developers.google.com/closure/compiler/docs/api-ref

API への直接リンクを含むスクリプト タグを配置できます。

于 2012-04-17T11:43:12.533 に答える
1

並列/非ブロッキングJavaScript ローダーの使用を検討してください。

以下は、これを行うことができるいくつかの優れたライブラリです..

http://headjs.com/

http://requirejs.org/

http://labjs.com/

于 2012-04-17T10:37:34.587 に答える
1

私はこれらすべての実装を完全にマスターしていませんが、サーバーによってかなりの量の縮小と連結を自動化できることを発見しました.HTML5ボイラープレートの（よくコメントされた）.htaccessファイルを読んでかなりの量を学びました。ドキュメント。

Modernizr は非同期ローダー機能も備えており、require.js を完全に理解できなかったときに機能させることができたことが十分に文書化されていました。

于 2012-09-19T19:42:06.607 に答える
0

スクリプト ローダー ライブラリを使用することも、自分で行うこともできます。

スクリプトを含める場所とブラウザがリソースをロードする方法

<body>ユーザー エクスペリエンスを向上させるために、常に終了タグの直前に配置します。ページ コンテンツが最初にレンダリングされることが保証されるため、ページの読み込みが速くなるという印象を与えます。

ブラウザは単一のスレッドを実行し、ページのコンテンツを上から下に処理します。リソースで発生した場合、最初にリソースを取得して処理し、次にページの次のタグのみを続行する必要があります。どのような場合でもスクリプトを実行する前に、DOM の読み込みが完了するのを待つのが一般的であるため、この戦略は常にウィン ウィンです。

サイズが重要

本番環境では、スクリプトをロードするために採用する戦略に関係なく、すべてのスクリプトが確実に縮小されるようにする必要があります (サイズが小さい == ダウンロードが少ない == 高速)。

正しい順番

最も重要なのは常に依存関係の順序です。関数を呼び出したり、変数にアクセスしたりして、ブラウザが最初にそれを認識しない場合、スクリプトは失敗します。スクリプトが依存するスクリプトの後にのみスクリプトが含まれるようにする必要があります。したがって、最初にすべきことは、ブラウザーに機能を組み込んで導入する必要がある順序を考え出すことです。

スクリプトをページに含める方法

ページにスクリプトを含める方法は 1 つしかなく (同じオリジンの ajax/eval は推奨されません)、<script>タグを使用する方法しかありません。

<script>タグを作成するには、次の 2 つの方法しかありません。

  1. html または
  2. JavaScript で動的に追加されます。

静的に追加されたスクリプト

スクリプトを含める必要がある順序がわかっているので、次のようにスクリプトを 1 つずつ追加できます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.5.2/jquery.tablesorter.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.5.2/jquery.tablesorter.widgets.min.js"></script>

動的に追加されたスクリプト

DOM でスクリプト タグを動的に効果的に作成する方法は 3 つあります。これらは確かに唯一の方法ではありません...

ドキュメント.書き込み

write メソッドは既存の dom に追加されます。

document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>');

しかし、スクリプトのロードが完了したことを伝える方法がないため、次の問題をロードするか、そこで定義されている何かを呼び出す前に完了するまで待つ必要があるため、問題が発生しています。

document.createElement

createElement メソッドは dom 要素を作成し、選択した dom のどこにでも挿入できます。次の例では、jQuery が存在するかどうか、または<script>要素を作成してフェッチするかどうかを確認します。いずれにせよ、関数 ready_go が呼び出され、jQuery が必要になります。

(function() {
    if (!window.jQuery) {
        var jq = document.createElement('script');
        jq.type = 'text/javascript';
        jq.async = true;
        jq.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(jq, s);

        jq.onreadystatechange = jq.onload = ready_go;
    } else ready_go();
})();

jQuery.getScript

jQuery があるので難しいことをする必要はありません。getScript はスクリプトの URL を最初の引数として取り、スクリプトが完了すると関数を 2 番目の引数として呼び出します。

function ready_go() {
    $.getScript('http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.5.2/jquery.tablesorter.min.js', function () {
         // script is done loading we can include the next
         $.getScript('http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.5.2/jquery.tablesorter.widgets.min.js', function () {
             // script is done loading we can include the next or start using our stuff
         });
    });
}

スクリプトはどこから入手できますか?

パブリック CDN からスクリプトを取得するか、自分でホストする必要があります。覚えておくべき重要な概念は、スクリプトは他のリソースと同様にブラウザーによってキャッシュされるため、同じスクリプトを繰り返しダウンロードする必要がないということです。

コンテンツ配信ネットワークからのスクリプト

CDN の利点は 2 つあります。

  1. CDN は世界中に分散された POP で構成されており、1 つの URL を呼び出していても、応答するサーバーが異なる場合があるため、ユーザーに近づきます。
  2. 多くのサイトが同じ CDN を使用する可能性があります。ユーザーが私のサイトにアクセスしたときに既に Google の CDN から jQuery を取得している場合、ユーザーのブラウザーは、要求されたときに既に所有しているキャッシュ コピーを使用するだけです。

オリジン (サーバー) から提供されるスクリプト

@Mario と @Xharze が提案する戦略に同意します。すべてのページに 18 のスクリプトを含めるよりも優れています。

スクリプトが利用可能な CDN を使用しますが、それ以外の場合は使用します。

同じ依存関係の順序が適用されることに注意して、すべてのスクリプトを連結し、それらを縮小します。

スクリプトが 1 つあれば、インクルードが簡素化されます。また、ブラウザがスクリプトをキャッシュするため、追加のダウンロードが不要になります。これは、長期間使用され、多くのページにアクセスするアプリケーションで特に有益です。

個別のスクリプトが保持する唯一の利点は、ランディング ページから離脱するユーザーのためであり、そのためにユーザーが滞在しない理由を最適化する必要があります。

nJoy!

于 2013-01-22T03:02:15.250 に答える