16

すべての CSS スクリプトと、ダウンロードする必要があるものを 1 つのファイルにまとめることで、どれくらいの利益が得られるのでしょうか?

スプライトを使用すると多くの勝利を得られることはわかっていますが、ある時点でそれを行うと実際に害が生じる可能性があります。

たとえば、私のウェブサイトは小さなアイコンをたくさん使用しており、これらのアイコンをすべて組み合わせると、ほとんどのページに異なるアイコンがあります。合計で 500kb を超える可能性がありますが、ページごとに 1 つのスプライトを作成すると、ほぼ 50kb/ページに減少するため、いいね。

しかし、スクリプトjs/cssについてはどうでしょうか。各ページに 100 行強のスクリプトを作成すると、どれくらいの利益が得られるでしょうか? それとも、まったく勝てないのでしょうか？

質問、基本的に、1 つのリクエストでファイルをダウンロードするのにどれくらいの費用がかかるかを知りたいのですが、今日の最新のブラウザーと高速接続で多くのスクリプト/画像ファイルを使用するのは本当に悪いことですか.

編集

ご回答いただきありがとうございます。すべての回答が私の質問に答えてくれたので、1つだけを選ぶのは難しかったです。私の意見では、リクエストのコストに関する私の質問に最も直接的に回答したものに報酬を与えることにしました。どの回答も正しいとは認めません。みんなそうだったから。

4

8 に答える 8

10

複数のリクエストはより多くのレイテンシーを意味するため、多くの場合、違いが生じます。正確には、応答のサイズ、サーバーのパフォーマンス、ホストされている場所、キャッシュされているかどうかなどによって異なります。実際の測定値を取得するには、実際の例で実験する必要があります。

私はよく PageSpeed を使用しており、通常は文書化されたベスト プラクティス ( https://developers.google.com/speed/docs/insights/about ) に従います。

最後の質問に直接答えるには: 追加のリクエストはより多くの費用がかかります。多くのファイルを持つことが必ずしも「本当に悪い」というわけではありませんが、一般的には、可能な場合はコンテンツを 1 つのファイルに結合することをお勧めします。

于 2016-02-22T10:07:33.770 に答える
8

あなたの質問は、本当の一般的な方法では答えられません。

スクリプトとスタイルシートを組み合わせる理由はいくつかあります。

HTTP/1.1 を使用するブラウザは複数の接続を開きます。通常、ホストごとに 2 ～ 4 です。ほとんどすべてのサイトには、実際の HTML ファイルと、スタイルシート、スクリプト、または画像などの他のリソースが少なくとも 1 つあるため、これらの接続は、index.html.

  • TCP 接続はコストがかかります。そのため、ブラウザは事前に複数の接続を直接開いています。
  • 通常、接続は少数に制限されており、各接続は一度に 1 つのファイルしか転送できません。

とはいえ、ファイルを複数のホスト (追加のstatic.example.comなど) に分割することもできます。これにより、ホスト/接続の数が増え、ダウンロードが高速化されます。一方、これにより、接続数が増え、DNS ルックアップが増えるため、追加のオーバーヘッドが発生します。

一方、ファイルを分割したままにしておく正当な理由があります。

最も重要なのは HTTP/2 です。HTTP/2 は単一の接続のみを使用し、その接続を介してすべてのファイル ダウンロードを多重化します。これを示す複数のオンライン デモがあります。たとえば、http ://www.http2demo.io/ です。

ファイルを分割したままにしておくと、個別にキャッシュすることもできます。小さな部分を変更しただけの場合、ブラウザは変更されたファイルをリロードするだけで、他のすべては を使用して応答されます304 Not Modified。もちろん、適切なキャッシング ヘッダーが必要です。

とはいえ、リソースがあれば、HTTP/2 をサポートするクライアントに対して、HTTP/2 を使用してすべてのファイルを個別に提供できます。古いクライアントが多数ある場合は、それらが HTTP/1.1 を使用してリクエストを行うときに、結合されたファイルにフォールバックできます。

于 2016-02-23T15:19:54.683 に答える
3

これらのタイプのいずれかを使用した場合の勝率は、特定のニーズによって異なる場合がありますが、私の場合について説明します。私の Web アプリケーションでは、すべてのファイルを結合するのではなく、2 種類のファイル、共通ファイル、ページごとのファイルには、アプリケーションにグローバルに必要な共通ファイルと、その場合にのみ使用されるその他のファイルがあります。その理由は次のとおりです。

ここに画像の説明を入力

上記は、私の Web アプリケーションのチャート リクエスト分析です。考慮する必要があるのは、これです。

DNS Lookup はその後キャッシュされるため 1 回だけ行われますが、DNS 名は既にキャッシュされている可能性があります。

各リクエストには、次のものがあります。

request start + initial connection + SSL negotiation+ time to first byte + content download

ほとんどの場合、リクエスト時間の大部分を占める主な要因は、コンテンツのダウンロード サイズです。そのため、すべてのページですべてのファイルを使用する必要がある複数のファイルがある場合は、それらを 1 つのファイルに結合して、TCP を節約できるようにします。一方、特定のページで使用する必要があるファイルがある場合は、それを別のページにして、コンテンツのダウンロード時間を他のページで節約できるようにします。

于 2016-02-26T19:12:59.557 に答える
2

実際、多くの Web 開発者が直面する非常に関連性の高い質問 (トピック) です。

また、この質問の他の貢献者の中に私の答えを追加します。

答える前にはじめに

さまざまな要因に応じた高パフォーマンスの Web サイトについては、次の点を考慮してください。

  • ウェブサイトのサイズ
  • Web サイトのコンテンツ タイプ (プライマリ コンテンツのテキスト、画像、ビデオ、またはそれらの混合)
  • あなたのウェブサイトのトラフィック (あなたのウェブサイトを訪れる平均人数)
  • Webホストの場所と主な訪問者の場所（国、地域、および世界全体）、ヨーロッパ向けのWebサイトがあり、ホストが米国にある場合、それは非常に重要です.
  • Web ホスト サーバー (ハードウェア) テクノロジ、私は SSD ディスクを好みます。
  • Web サーバー (ソフトウェア) のセットアップと最適化の方法
  • Web サイトは動的か静的か
  • 動的な場合、コードとデータベースがどのように構造化および設計されているか

ニーズを定義することで、適切な戦略を見つけることができるかもしれません。

ご質問全般について

あなたのウェブサイトに関するもの。Steve Souders の著書High Performance Web Sitesの 14 番目の推奨事項を参照することをお勧めします。

スティーブ・サウダーズ 14 のアドバイス:

  1. HTTP リクエストを減らす
  2. コンテンツ配信ネットワーク (CDN) を使用する
  3. Expires ヘッダーを追加する
  4. Gzip コンポーネント
  5. スタイルシートを一番上に置く
  6. スクリプトを一番下に置く
  7. CSS 式を避ける
  8. 可能であれば JavaScript と CSS を外部にする
  9. DNS ルックアップを減らす
  10. JavaScript を縮小する
  11. リダイレクトを避ける
  12. 重複スクリプトを削除
  13. ETage の構成
  14. Ajax をキャッシュ可能にする

ご質問について

したがって、js/css次のことを考慮すると、非常に役立ちます。

  1. ファイルごとに異なるコードを使用することをお勧めします。
    例: page1、page2、page3およびがある場合がありpage4ます。
    Page1and page2uses js1and js2
    Page3uses only js3
    Page4uses alljs1を使用 しているため、3 つのファイルに JavaScript を含めることをお勧めしますjs2。js3
    使用しないものをすべて含めることに関心があるわけではありません。
  2. CSS スプライト
  3. 上部に CSS、最後に JS
  4. JavaScript の縮小
  5. JavaScript と CSS を外部ファイルに入れる
  6. たとえば、jQuery を使用する場合は CDN を Web サイトにダウンロードせず、推奨される CDN アドレスを使用してください。

結論

詳細を書く必要があると確信しています。また、すべてのアドバイスを実装する必要があるわけではありませんが、それらを認識することは重要です。前に述べたように、この小さな本を読むことをお勧めします。詳細が記載されています。そして最後に、完璧な最終的な解決策はありません。どこかから始めて、最善を尽くして改善する必要があります。何も永久的ではありません。

幸運を。

于 2016-02-27T17:42:22.477 に答える
1

あなたの質問への答えは、それは本当に依存しています。

ページ読み込みの最適化の最終的な目標は、ページの読み込みが速いとユーザーに感じさせることです。

いくつかの提案:

  • jquery coz のような一般的なライブラリ js css ファイルをマージしないでください。他のサイトにアクセスしたときにブラウザによって既にキャッシュされている可能性があるため、それらをダウンロードする必要さえありません。

  • リソースをマージしますが、少なくとも最初の画面で必要なリソースと他のリソースを分離します。以前のユーザーが意味のあるものを見ることができたので、ページについてより速く感じることができます。

  • 複数のページでリソースを共有している場合は、マージされたファイルを共有リソースとページ固有のリソースに分けて、2 番目のページにアクセスしたときに、共有されているファイルがブラウザーによって既にキャッシュされている可能性があるため、ページの読み込みが速くなります。

  • ユーザーは、低速または一貫性のない速度の 3g/4g ネットワークで電話を使用している可能性があります。そのため、50k のデータまたは 2 つの追加の要求でも、ユーザーの感覚は大きく異なります。

于 2016-02-25T15:28:15.090 に答える
1

css/js/markup の種類ごとに、100 行のファイルがたくさんあるのは本当に悪いことです。

デスクトップはほとんどが高速接続で、モバイルも遅延が大きいです。

このトピックに関するすべての理論を考慮すると、最良のアプローチはより実用的で、精度が低く、統計的な観点から実際の接続速度とデバイスの種類に基づいていると思います.

たとえば、これが今日の最善の方法だと思います。

1）最初のページ/機能をユーザーに表示するために必要なすべてのものを1つのファイルに入れ、100KB未満にする必要があります-これは絶対に必要です。

2) その後、ファイルをサイズごとに分割またはグループ化して、ダウンロード時間とともに遅延が目立たなくなるようにします。

簡単かつ具体的に説明すると、最初のバイトまでの時間は約 200 ミリ秒であり、各ファイルのサイズは 120 KB から 200 KB の間である必要があり、今日のほとんどの接続に適しています (平均)。

于 2016-02-28T00:40:10.080 に答える