1

私はfamfamfamシルクアイコンセットから約30枚の画像を使用しており、base64でエンコードされた形式でこれらを見つけました

アイコンは.cssファイル（約20kb）に保存され、結果の各行には同じアイコンが5つ含まれます。httpsを介して最新のブラウザーにのみ提供されます。

単一の外部CSSファイルから参照される5つの同一のアイコンを含む100行があるかどうかを知りたいのですが、これは個々の画像ファイルやスプライトよりもパフォーマンスが優れていますか？CSSファイルは明らかにキャッシュされますが、ブラウザーがデータから同じ背景画像を何度もレンダリングする必要がある場合、これはキャッシュされた画像ファイルよりも優れているのでしょうか、それとも悪いのでしょうか。

ウィキペディアからもこれに気づきましたが、他の人の意見や経験に興味があります。

同じドキュメントから同じリソース（埋め込まれた小さな画像など）を複数回参照すると、埋め込まれたリソースの複数のコピーが作成されます。それに比べて、外部リソースは何度でも任意に参照できますが、ダウンロードとデコードは1回だけです。

4

1 に答える 1

2

そのための測定可能なテストを行う方法はわかりませんが、次のフィドルを作成しましたhttp://jsfiddle.net/chrisdanek/36Uk3/

divこれは、背景がfamfamfamアイコンの1つに設定された1000個の要素です。

div { 
  float: left; 
  background: url('data:image/png;base64,...') no-repeat; 
  width: 16px; 
  height: 16px; 
}

これで、Chromeの開発ツールを覗いてみると、このアイコンが個別のリソースとして1000回ではなく、1回だけ読み込まれていることがわかります。この例をプロファイリングするときと、アイコンへのURLを使用するときのどちらでも、メモリ負荷の違いに気づいていません。

他のブラウザではこの動作が異なる場合がありますが、CSSで繰り返して同じエンコードされたリソースを再利用しない限り、エンコード自体に基づく違いは見られないはずです。それでも、HTTPリクエストが1つ少ないというメリットがあります。

于 2013-02-25T21:43:11.920 に答える