3

ページには約 30 の外部 JavaScript があります。それぞれがすでに縮小されています。

HTTP リクエストとページの読み込み時間を短縮するために、それらを 1 つのファイルに結合することを検討しています。これは、YSlow ツールで推奨されていました。

これは賢明でしょうか、それともそれらを結合して、たとえば 15 個のスクリプトを含む 2 つのファイルにする方がよいのでしょうか?

結合された JavaScript ファイルに最適なサイズはありますか?

4

2 に答える 2

9

HTTPリクエストが少ないほど、優れています。ページをモバイルデバイスでも機能させる場合は、各スクリプトノードの合計サイズを1 MB未満に保ちます（http://www.yuiblog.com/blog/2010/07/12/mobile-browser-cache-を参照）。制限-再検討/）

また、onloadの起動後にスクリプトのいずれかを延期できるかどうかを確認することもできます。次に、2つの結合されたファイルを作成できます。1つはページにロードされ、もう1つはページのロード後にロードされます。

HTTPリクエストを減らすように人々に求める主な理由は、リクエストごとにレイテンシの代償を払うためです。これらのリクエストが順番に実行される場合、これは問題になります。複数のリクエストを並行して行うことができる場合、これは帯域幅[*]のはるかに優れた使用法であり、レイテンシーの代償を支払うのは1回だけです。スクリプトを非同期でロードすることは、これを行うための良い方法です。

ページの読み込み後にスクリプトを読み込むには、次のようにします。

// This function should be attached to your onload handler
// it assumes a variable named script_url exists.  You could easily
// extend it to use an array of scripts or figure it out some other
// way (see note late)
function lazy_load() {
    setTimeout(function() {
            var s = document.createElement("script");
            s.src=script_url;
            document.body.appendChild(s);
        }, 50);
}

これはonloadから呼び出され、50ミリ秒後にタイムアウトを設定します。その時点で、ドキュメントの本文に新しいスクリプトノードが追加されます。その後、スクリプトのダウンロードが開始されます。javascriptはシングルスレッドであるため、onloadが完了するまでに50ミリ秒以上かかる場合でも、onloadが完了した後にのみタイムアウトが発生します。

これで、という名前のグローバル変数を使用する代わりにscript_url、ドキュメントの上部にスクリプトノードを配置できますが、次のような認識されないコンテンツタイプを使用できます。

<script type="text/x-javascript-deferred" src="...">

次に、関数で、このコンテンツタイプのすべてのスクリプトノードを取得し、それらのsrcをロードする必要があります。

defer一部のブラウザは、これらすべてを自動的に実行するスクリプトノードの属性もサポートしていることに注意してください。

[*] TCPウィンドウサイズの制限により、1回のダウンロードで利用できるすべての帯域幅を実際に使用することはありません。複数の並列ダウンロードにより、帯域幅をより有効に活用できます。

于 2010-07-21T06:46:08.057 に答える
2

ブラウザは、ファイルが分割されている場合と同じように、すべてが 1 つのモノリシック ファイルに結合されている場合と同じくらい多くの JavaScript を解釈する必要があるため、解釈と実行のパフォーマンスにはまったく問題ではないと言えます。

ネットワーク パフォーマンスに関しては、HTTP 要求が少ないほど優れています。

于 2010-07-20T15:38:21.183 に答える