5

JavaScript の読み込みの最適化に関する記事をオンラインでいくつか読みました。私が得たいくつかの重要なポイントは、スクリプト ファイル (http 要求) の数を最小限に抑え、縮小してサーバー上で gzip を有効にすることです。現在、私の側で行われていることは、すべての JavaScript ファイルが縮小され、gzip も簡単に有効にできることです。

パート1）

私の問題は、約 20 個の JavaScript ファイルがあり、すべてのコア機能を備えた common.js が 1 つあることです。それに加えて、すべてのページは、そのページの機能を実装する他のファイルを少なくとも 1 つロードします。

解決策 1 は、すべてのスクリプトを 1 つの大きなスクリプト ファイルに結合し、クライアントごとに 1 回ロードすることです。これは、他のすべての人が行っているようです。圧縮には YUI や JSMin が使えると思いますが、手動でファイルを結合する必要がありますか?

解決策 2、必要な機能が必要な場合の遅延読み込み。これがどのように機能するかはよくわかりませんが、それを行う方法のようですが、まだより多くの http 要求が必要です。これについての意見をお聞きしたいと思います。

パート2）

私が取り組んでいる Web アプリケーションは、他の多くのコンピューターにデプロイされます。JavaScript は非常に小さいため、すべてのクライアントが最新のスクリプトを実行できるように、中央サーバーから最新のスクリプトを動的にロードするスクリプトを作成することをお勧めします。 ?

4

3 に答える 3

3

一般的なベストプラクティスは次のように見なされます

  1. できるだけ少ないファイルにマージする

  2. 縮小する

  3. gzipで圧縮して提供

  4. できるだけ遅くサービスを提供します（頭の中にいる必要がある場合もありますが、通常は前または非同期が推奨されます

これは一般的なアドバイスです。自分のケースに適していることを確認するために、それを実行してテストする必要があります。

HTTPリクエストを最小限に抑えることは重要であり、レイテンシーはパフォーマンスのキラーです...

于 2012-04-11T21:20:08.430 に答える
3

パート 1: おっしゃる通り、2 つのアプローチがあります。

  • 解決策 1 は有効であり、 Google の Closure Compilerなど、これを行うためのツールがあります。問題は、ほとんどの場合、適切に機能するためにサイト上のすべてのスクリプトを含める必要があるため、ページが何を使用するかに関係なく、すべてを取得することです。
  • 解決策2も有効ですが、あなたが言ったように、複数のhttpリクエストを実際に防ぐことはできません。ただし、必要なときに必要なものだけをロードし、最初のページのロード時にブロッキング呼び出しを作成しないという点で優れています。Head.js は、Require.js などと同様に言及されたオプションです。

パート2：

  • ブラウザに常に最新の JavaScript ファイルをダウンロードさせる方法はいくつかありますが、この種の方法ではブラウザのキャッシュの利点が無効になります。一般的な方法の 1 つは、javascript URL の末尾に get 変数を追加することです。つまり、「domain.com/index.js?timestamp=_123123123」です。これは、ajax 呼び出しのキャッシュをオフにしたときに jQuery が行うことと似ています。
于 2012-04-11T21:22:39.633 に答える
2

最適化をいくつかのステップに分割する必要があります

  1. ソースコードを最適化する: DOM オーバーヘッドの少ない JS コードを作成する、メモリ内に作成する変数と DOM 要素を少なくする、効率的なループを作成するなどの良い方法があります。これらは通常、スクリプト コンパイラでは最適化できません。
  2. 縮小: これには 2 つの解決策があります
    • 1 つのファイルにマージして縮小します。(Google の Closure Compiler Ugliifyを使用)
    • 各ファイルを縮小してから、遅延ロードします。個人的には、 AMDモジュラー パターンを使用してモジュールを定義するのが好きです。ブート ファイルを使用して、1 つのファイルにコンパイルするか、モジュール構造と遅延読み込みを維持するかを選択できますが、各モジュールも縮小されます。
  3. サーバーの最適化
    • あなたのサーバーは gzip された JavaScript を提供していますか?
    • <script src='//...' async defer>可能な場合は使用するようにしてください。スクリプトの依存関係がある場合は、非同期ロードを使用するときに注意してください。AMD モジュールを使用すると、依存モジュールが事前に読み込まれ、ページの更新ごとに 1 回だけ読み込まれるようになります。
    • CDN を使用して静的コンテンツを提供し、画像、ファイル、JavaScript をコンテンツ配信ネットワークに保存します
于 2012-04-14T02:48:00.103 に答える