41

1 つのページ内で同じ画像を複数回使用すると、それぞれが個別に読み込まれ、帯域幅とトラフィックが消費されますか? それとも 1 つだけが読み込まれ、残りの埋め込みコードが画像を再利用しますか?

たとえば、私がこれをしたとしましょう：

<img src="http://img.to/image.jpg"/>
<img src="http://img.to/image.jpg"/>
<img src="http://img.to/image.jpg"/>
<img src="http://img.to/image.jpg"/>
<img src="http://img.to/image.jpg"/>
<img src="http://img.to/image.jpg"/>
...
<img src="http://img.to/image.jpg"/>
<img src="http://img.to/image.jpg"/>

そしてimage.jpg100kbです。ブラウザがこのページをロードするとき、(100Kb * img タグの数) のトラフィックを浪費しますか? それとも、1 つだけをロードimage.jpgして、残りのタグに再利用しますか?

4

3 に答える 3

18

試してみてください — キャッシュの問題を調べるときは、Firefox の Firebug や Chrome 内の開発者ツールなどのツールが非常に役立ちます。いずれかの [ネット] パネルを開いてページをリロードすると、各アイテムに対して送信された HTTP ステータス コードが表示されます。304 (変更されていません) は、アイテムがキャッシュからローカルに取得されたことを意味します。

上でdthorpeが言っているように、ここではキャッシュ ヘッダーが重要です。「no-cache」が設定されていないことを確認するだけでなく、サーバー構成にアクセスできる場合は積極的に対応する必要があります。リソースが変更されないことがわかっている場合は、いずれかを設定する必要があります。 「Expires」ヘッダー (キャッシュされたコピーが古くなったと見なされる日付をブラウザーに通知します) または「Cache-Control: max-age」ヘッダー (設定された日付ではなく、日数/時間数を示します)。

さまざまな MIME タイプ/フォルダーにさまざまな時間スケールを設定することもできます。これにより、クライアント データを取得して HTML コンテンツを頻繁に更新できますが、画像やスタイルシートはめったに更新されません。

これは、チェックする価値のある、Google による素敵な紹介ビデオ/記事です。

于 2012-07-01T18:40:36.507 に答える
8

特定のブラウザーの実装に依存する可能性がありますが、画像への最初の参照がサーバーにヒットし、同じ画像 URL への後続の参照がブラウザーのキャッシュから提供されることを期待しています。そのため、画像に対するネットワーク リクエストは 1 つだけです。

つまり、IF画像応答でサーバーによって設定された HTTP キャッシュ ヘッダーにより、ブラウザは画像をキャッシュすることができます。キャッシュ ヘッダーが「no-cache」などに設定されている場合、ブラウザは参照ごとに画像を再取得する必要があります。Fiddler などのネットワーク パケット スニファーを使用して、画像応答の HTTP ヘッダーが何であるかを確認できます。

画像が完全にダウンロードされるまで、ブラウザーがブラウザーのキャッシュに画像の URL を入力しない場合、同じ画像に対する複数の要求が表示される可能性がありますが、その可能性は非常に低いと思われます。

于 2012-06-30T04:57:06.050 に答える