2

重複: 複数の javascript/css ファイル: ベスト プラクティス?

こんにちは、私のアプリケーションはほぼ完成していますが、多くの外部 JavaScript ファイルと CSS が含まれていることに気付きました。私はここで多くのサードパーティの無料プラグインを使用していますが、何かを台無しにすることを恐れてコードに触れたくありませんでした.

しかし、その結果、8 つの外部 css ファイルと、なんと 20 の外部 Javascript ファイルが含まれていることに気付きました:O - 2 つまたは 3 つ以上の css_js ファイルを組み合わせて含む主要な Web サイトを見たことを覚えていないので、間違いなくここで何か間違ったことをしているに違いありません。これをどのように整理しますか - 1 つの大きな js ファイルは、累積サイズの半分でさえある 2 つまたは 3 つのファイルよりも読み込みが速いとどこかで読みました。

どんな助けでも大歓迎です

4

6 に答える 6

2

1 つの大きなファイルは、小さなファイルの束よりも優れています。この場合、Web ブラウザーは Web サーバーに対して、たとえば 8 つの要求ではなく 1 つの要求を行うためです。さらに重要なのは、合計サイズのわずかな違いではなく、リクエストの合計レイテンシです。

2 つのシナリオを想像してください。8 kB のファイルを 1 つダウンロードし、それぞれ 1kB のファイルを 8 つダウンロードします。

  1. 最初のシナリオでは、合計時間は 80 ミリ秒 (転送時間) + 50 ミリ秒 (待機時間) = 130 ミリ秒のようになります。

  2. 2 番目のシナリオでは、8x10 ミリ秒 (転送時間) + 8x50 ミリ秒 (!) の待ち時間 = 480 ミリ秒 (!) のようになります。

違いがわかります。これは決して包括的な例ではありませんが、アイデアは理解できます。

したがって、可能であれば、ファイルをまとめてマージしてください。コンテンツを圧縮して、転送するデータの量を減らします。また、キャッシングを使用して、繰り返し要求を取り除きます。

于 2009-04-29T10:18:56.240 に答える
1

とにかく、ほとんどのファイルはクライアント側のキャッシュに格納されるはずなので、あまり心配する必要はありません。正しいヘッダーを設定していることを確認してください。もちろん、これがサイトのフロント ページである場合は、さらに最適化する必要があります。

于 2009-04-29T10:19:15.447 に答える
1

ゆいコンプレッサーhttp://developer.yahoo.com/yui/compressor/

そして素敵なチュートリアル: http://beardscratchers.com/journal/compressing-css-and-javascript-with-yui-compressor

于 2009-04-29T09:24:20.443 に答える
1

CSS ファイルを現在ページにロードされている順序で 1 つのファイル (JS の場合も同じ) に結合すると、以前とまったく同じように機能します。順序を変更し始めると、ルールが慣れていないルールを予期せず上書きする可能性があります。

于 2009-04-29T10:06:38.457 に答える
0

こちらをお読みください: Web サイトを高速化するためのベスト プラクティス

于 2009-04-29T09:27:20.750 に答える
0

過去のプロジェクトでは、SmartOptimizerを使用して JS ファイルと CSS ファイルをオンザフライで圧縮しました。これは、PHP ベースのファイル ミニファイヤーです。

ジャスト イン タイム ミニファイヤを使用することで、ソースと縮小されたファイルを別々に保持する必要がなくなります。もちろん、ファイルを縮小し続けるには、多少の処理能力が必要です。また、単一の縮小ファイルをロードする方が、次の利点があります。

  1. ファイルサイズが小さい（確かに）
  2. スクリプト/スタイルシートが少ないため、コンポーネントの並列ダウンロードの遅延がありません。
于 2009-04-29T09:34:39.717 に答える