32

必要であるがここで説明するのが難しい理由のために、私は絶対位置の画像とdivの背景画像の両方を設定しています。

ブラウザがこれらの画像（非常に大きい）を取得した後は、それらを再取得しないようにしたいと思います。

bg.jpg次のコードの画像が500KBであるとしましょう。次のコードにより、ブラウザは画像全体を2回、合計1000KBダウンロードしますか？

<style>
    header {
        background: url(img/bg.jpg) center center fixed transparent;
    }
</style>

<header>
    <img src="img/bg.jpg" width="500" height="500">
</header>

編集：あなたの素晴らしい答えをありがとうございました。私はただ再確認して、ユーザーにこれらの非常に大きな画像を再ダウンロードさせていないことを確認したかっただけです。

4

3 に答える 3

35

ブラウザはキャッシングに関してはかなり賢いです。それは一度だけそれを要求するべきです。

さらに、サーバーに画像を要求すると、通常、画像の要求とと​​もに、サーバーに通知するいくつかのヘッダーが送信されます。ねえ、私はこの画像が欲しいのですが、あなたが私に言ったこれらの属性を持つ画像をすでに取得しています前回あなたが私にそれを送った時について。

200サーバーは、コンテンツが異なるという意味で応答できます。304つまり、所有しているコンテンツは同じであるため、再度送信することはありません。取得したコンテンツを使用してください。

これらのメソッドの1つはETAGヘッダーを使用しますが、他にもいくつかあります。

サーバーはこれをサポートする必要がありますが、ほとんどはサポートしています。

さらに、interwebは一連のキャッシュで構成されており、これらのキャッシュもこれらの種類のヘッダー値を調べて、データを返します。これが、Webのスケーリングが非常に優れている理由です;-)

于 2012-08-01T00:49:23.143 に答える
5

いいえ、ブラウザはそれをキャッシュします。ただし、ユーザーの設定によっては、次にページが要求されたときに、ブラウザーが再度画像を要求する場合があります。たとえば、ユーザーがページ訪問の間にキャッシュをクリアした場合などです。

于 2012-08-01T00:45:19.253 に答える
3

いいえ、一度ダウンロードしてからブラウザのキャッシュに入れます。次にその URL が参照されると、サーバーから画像を取得するのではなく、キャッシュから画像を検索します。

于 2012-08-01T00:46:12.133 に答える