web-dev-qa-db-ja.com

すべてのページにメインJavaScriptをロードしていますか？または、関連するページに分割しますか？

すべてのページにロードされる700kb解凍されたJSファイルがあります。各ページに12 javascriptファイルがある前に、httpリクエストを減らすために、それらをすべて1 fileに圧縮しました。

このファイルは~130kb gzippedであり、gzipを介して提供されます。ただし、ローカルコンピューターでは、すべてのページに展開されて読み込まれます。これはパフォーマンスの問題ですか？

Firebugプロファイラーでjavascriptのプロファイルを作成しましたが、問題は見られませんでした。私が直面している問題/幻想は、そのファイルに圧縮されたjqueryライブラリがあり、現在のページでは使用されていないことです。

たとえば、jquery datatablesは200kb圧縮されており、2つのWebサイトページにのみロードされます。もう1つはjqplotで、もう1つは200kbです。

ページの400kbで実行されない80%の余分なコードがあります。

すべてを1つのファイルに残す必要がありますか？

Jqueryライブラリを取り出して、現在のページに関連するJSのみをロードする必要がありますか？

javascriptjquerypage-speedhttpload
13
Kyle

requirejs を使用して、そのページでのみ必要なライブラリを動的にロードできます。次に、すべてのページにrequirejs（約14k）を読み込むだけで、約385kb節約できます。

統合も非常に簡単です。必要なものを含むコードを「ラップ」するだけです。

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
})
6
Michael

フレームワーク/ CMS /何でも適切な機能がある場合、@ Michaelが示唆するようにスクリプトを条件付きで含めることができますが、追加のライブラリはありません。

たとえば、データテーブルの場合、WordPressは次のような状況で処理する場合があります。

// For reference; this isn't functional code.
if (is_page('whatever')) {
    <script src="/path/to/datatables.js"><script>
    <script>
        [Your datatables setup here]
    </script>
}

RequireJSには何も問題はありません。追加する複雑さのレベル（さらに最初に使用することを学ぶこと）が、より簡単に利用できるツールでできることを相殺するかどうかを評価する必要があります。上記の2つのケースしかない場合、これはより良いオプションかもしれません。さらに多くのことが行われている場合は、RequireJSが全体的に優れたアプローチである可能性があります。

8
Su'

JavaScriptの700 kb ISは、ページの読み込み後に解析する必要があるため、パフォーマンスの問題です。そのため、必要なスクリプトのみがロードされるように注意する必要があります。 1つの大きなページを離れることなくナビゲーションが内部的に処理される場合、GMailなどの完全なAJAXサイトで1つの大きなJavaScriptで問題ない場合があります。ただし、完全なAJAXサイトでさえ、動的なJSロードを実行して、開始時に不要なJSをロードしないようにします（メモリと速度の両方の問題）。

HTTPトラフィックを減らしたいと言ってきました。 HTTPキャッシング で遊んでください。問題は、有効期限を高く設定した場合、キャッシュの有効期限が切れるまでJSへの変更が表示されない可能性があることです。

ただし、myscript.jsではなくmyscript.js?version={myversion}を参照するというトリックがあります。アプリケーションの更新後、{myversion}を変更し、JavaScriptを強制的に再読み込みします。

5
Danubian Sailor

〜700kbのJavaScriptはパフォーマンスの問題であり、圧縮されている場合、コードの最適化の処理中に従うべきルールを確認する必要があります。

  1. Minify Javascripts-単純に圧縮と解凍を行いますが、コードは削減されません。まず、優れたMinify JSツールを使用して、コードを縮小します。あなたは12のファイルであり、各ファイルは最高のパフォーマンスを得るためにクラブする前に個別に縮小します。

  2. 非同期JavaScriptロードを使用、非同期ロードを使用すると、非常に高速なロード時間とページのレンダリングが実現します。適切な非同期読み込みはレンダリングプロセスをブロックせず、ページの読み込み時間を大幅に短縮できるため、ユーザーへの影響は非常に大きくなります。 javascriptがロードされていないため、画像やその他の表示アイテムは定期的に表示されます。

  3. JQUERYにGOOGLE cdnを使用; JQUERYを使用して、独自のWebサイトから読み込んでいると思いますが、これも追加のデメリットです。GOQUELECDN（無料）を使用してJQUERYを読み込んでください。ほぼすべての3番目のWebサイトで使用されているため、キャッシュ内のクライアントコンピューターで既に利用可能です。

  4. Custom long Expires Headers：読み込み時間の問題でWebサイトがどのように読み込まれるか、HTTP JSファイルのLong Expiresを指定する必要があります。これにより、毎回ダウンロードできなくなり、 2回目のリクエスト。私の調査によると、2ページ目にかかった読み込み時間は、1回目のページ訪問に比べて多くの離脱があります。

  5. ページ速度で確認：他のリソースもページの読み込み速度に優しくクロスチェックを行い、他のリソースも最適化しようとします。すべてのリソースで少しずつステップを実行すると、JSのロードに余分な時間がかかります。

1
Vineet1982