15

トラフィックがかなり多いWebサイトで作業しており、CSSスプライトを使用してデザインの画像の読み込み回数を減らすことを検討しています。

送信されるデータの量を減らす以外に、CSSスプライトを使用することに利点はありますか?本当にどれだけのスペースを節約できますか?スプライトを使用することがWebサイトにとって価値のあるものになるしきい値はありますか?

更新:ご回答ありがとうございます。それらは明らかにすべて非常に注意深く考えられており、あなたのポイントを検証するための良い情報源を提示しています。私は今、私のサイトデザインでCSSスプライトを使用することについて情報に基づいた決定を下すことがはるかに可能だと感じています。

4

6 に答える 6

17

問題は一般的に、それが節約できる帯域幅の量についてではありません。それは、Webページをレンダリングするために必要なHTTPリクエストの数を減らすことです。

検討中:

  • Webブラウザーは、並行していくつかのHTTP要求のみを実行します
  • HTTPリクエストを実行することは、サーバーへのラウンドトリップを意味し、これには多くの時間がかかります
  • 「高速」インターネット接続があります。つまり、高速でダウンロードできます...

小さなコンテンツ(画像やアイコンなど)を取得するために多くのリクエストを行う場合、時間がかかるのはサーバーへの複数のラウンドトリップです。リクエストが送信され、サーバーが応答するのを待つことになります。 、今回はデータのダウンロードに使用する代わりに。

リクエストの数を最小限に抑えることができれば、サーバーへのトリップの数を最小限に抑え、高速接続をより適切に使用します(多くの小さなファイルを待つのではなく、大きなファイルをダウンロードします)

そのため、CSSスプライトが使用されます。


詳細については、たとえば、CSSスプライト:イメージスライシングの死のキスをご覧ください。

于 2009-07-28T04:53:14.177 に答える
5

httpリクエストが少ない=全体的に読み込みが速くなります。ヤフーと共同。この手法を使用すると、ユーザーの数を想像できる場合は、多くの帯域幅を節約できます。アイコン用に50個の個別の画像を想像してください。これは、すべての画像を含む1つのcssスプライトとは対照的に、50個の個別のhttpリクエストであり、49個のhttpリクエストを保存し、サイトのすべてのユーザーごとにそれを乗算します。

于 2009-07-28T04:41:50.657 に答える
5

実際、スプライトは送信データの量を減らすために使用されるのではなく(ほとんどの場合、転送されるデータの量をわずかに増やすため)、サーバーで実行される要求の量を減らすために使用されます。

ブラウザでのHTTPリクエストは、従来、順番に実行されていました。つまり、前のリクエストが完了するまで、1つのリクエストは開始されません。また、リクエストを行うために接続を開くにはコストがかかります。サーバーで行われるリクエストの量を制限することで、要素の読み込み速度が向上します。

于 2009-07-28T04:44:12.710 に答える
2

私はYahooがCSSスプライトに対して最良の議論をしていると思います。その上、ページ全体は読む価値があります:

http://developer.yahoo.com/performance/rules.html#num_http

于 2009-07-28T04:53:06.827 に答える
1

リクエストの量を制限することでページ全体の読み込みのパフォーマンスが向上するだけでなく、画像スプライトは動的に画像を交換することもできます(たとえば、ホバー時にナビゲーションアイテムの背景画像を変更する)。変更するだけなので、「パフォーマンス」が少し向上します。 srcの代わりにx、y。

ですから、それらを使用することを保証するためのしきい値は何であるかを答えると思います。個々のクライアントの負荷が改善される可能性があるため、すぐに言います。

于 2009-07-28T04:48:50.050 に答える
0

(すでに述べたように)HTTPリクエストを減らすことに加えて、CSSスプライトはJavaScriptに依存していません。これには、他にもいくつかの利点があります。

  • 維持するコードが少ない
  • より簡単なクロスブラウザテスト
  • style属性を介してインラインでコーディングできます
  • DOMハッキングはありません
  • 画像のプリロードはありません(管理が少ない-「待ってください、新しいナビゲーションボタンをプリロードする必要があります...どの.jsファイルにプリローダーがありますか?」)
  • cssクラスを使用して、複数のセレクターに適用できます
  • :hover疑似クラスを使用する任意のセレクター、またはアンカーでラップできる任意のセレクター(imgsだけでなく)に適用できます。

ただし、DOMハッキングを嫌がらない場合は、X値とY値をプッシュするだけで、気の利いたアニメーション効果を得ることができます。keypressこれにより、さまざまな状態(またはなど)のアニメーション化が容易になりますonmouseclick

グラフィック制作の興味深い副作用もいくつかあります。

  • より少ないグラフィック制作ファイル
  • ボタンなどのレイアウトをHTMLで直接行うのが簡単です(PSDカンプの必要性が少ない)
  • 大量のグラフィックを再生成することなく、GUIを簡単に変更できます
  • 画像の海賊があなたのグラフィックを丸呑みするのはそれだけ難しい
于 2009-07-28T16:57:29.233 に答える