web-dev-qa-db-ja.com

大規模なJSライブラリをロードするコストを削減するにはどうすればよいですか？

ページに大きなJavascriptライブラリを使用している場合、これがユーザーによるサイトの使用を損なわないようにするにはどうすればよいですか？

javascriptperformance
23
Macha

できることは4つあります。

  1. JSファイルを縮小します。これにより、すべてのコメントと空白が削除され、サイズが小さくなります。
  2. 各ページでJSファイルを結合して、ファイルが1つだけになるようにします。
  3. パッケージを使用して、ファイルを送信するときにファイルをgzipします。これにより、さらに小さくなります
  4. 最後に読み込まれるように、必要のないJavascriptをすぐにページの下部に配置します。これにより、JSが完全にロードされる前であっても、ユーザーはページを表示して使用できます。

そして、他の何人かの人々は提案しました：

  • Apacheは、圧縮（および圧縮コンテンツのキャッシュ）を自動的に処理し、ファイルの管理を大幅に簡素化します
  • JavaScriptを適切にキャッシュ可能にすると、大きなメリットが得られます。
  • ワイルドカードドメイン（複数のURI）により、より多くの同時接続が可能になります。プリフェッチは画像/
25
Ben Hoffman

共通ライブラリ（jQuery、Prototype、Dojoなど）を使用している場合、ファイルをGoogleにオフロードして、それらを serve it にすると、いくつかの利点が得られます。

  • 縮小や圧縮などを心配する必要はありません
  • それはあなたの帯域幅ではありません
  • これらのファイルは別のドメインから取得されるため、（少なくとも部分的に） ホスト名ごとに2つの並列リクエストの制限 を回避できます
  • 運が良ければ、ユーザーは同じプロバイダーの同じライブラリを使用している他のサイトを既に訪問しているため、ブラウザーのキャッシュに既に存在しています。

注：要求するバージョンは、キャッシュの特性に大きな影響を与える可能性があります。jQuery1.4.2を要求すると、1年間キャッシュできるファイルが提供されますが、1.4は1時間しかキャッシュできません。

21
Cebjyre

ライブラリ全体を1つのjsファイルに入れて、ファイルを圧縮できます。ただし、実際に問題になるのは、ページの最初の読み込みのみです。この後、特にcache-expirationを十分に長く設定した場合、jsファイルはブラウザーにキャッシュされます。したがって、連続してヒットしてもjsファイルはロードされません。

6
txwikinger

上記の回答に加えて、 Google Closure Compiler を使用して、JSを自動的に圧縮および最適化しながら、他のサードパーティライブラリ（jQuery、YUI、mootoolsなど）と統合できます。

4
theycallmemorty

多数のページ要素と個別のドメインへのアクセスがある場合、2番目のドメインで大きなJSファイルを含むすべての静的ファイルをホストすることを検討できます。

Steve Soudersが彼のHigh Performance Web Sitesブログで述べているように -

...状況によっては、1つのドメインにダウンロードされている大量のリソースを取得し、それらを複数のドメインに分割する価値があります。このドメインをシャーディングと呼びます。これにより、より多くのリソースを並行してダウンロードできるため、ページ全体のロード時間が短縮されます。

他の場所で彼は書いています。

ブラウザーは、ドメインごとに限られた数の接続を開きます... 1つのドメインではなく、2つのドメインにまたがる要求を分割またはシャーディングすると、特にIE 6および7でページが高速になります

0
mvark