2009-03-18 9 views
4

が、多くの大規模なPNGファイルにロードすることができ、次のHTMLページ、考えてみましょう:IEでブラウザキャッシュはFirefoxでバイパスされますか?

<html> 
<head> 
<script type="text/javascript"> 

function hide() 
{ document.getElementById("here").innerHTML = "hidden"; 
}  
function show() 
{ var loadMe = ""; 
    for (var i=1; i<250; i++) 
    { loadMe += "<img src='http://domain.com/" + i + "_a.png'><br>"; 
     loadMe += "<img src='http://domain.com/" + i + "_b.png'><br>"; 
    } 
    document.getElementById("here").innerHTML = loadMe; 
} 
</script> 
</head> 
<body> 
<a href="javascript:hide();">hide</a> 
<a href="javascript:show();">show</a> 
<div id="here"></div> 
</body> 
</html> 

、サファリ&オペラをWindowsマシン上に、このページの画像は一度だけロードされている(FreeMeterで監視)するとき表示と非表示のボタンが切り替わります。

一部の画像はサーバーから複数回読み込まれます(ネットワーク要求の最初のピークと決して一致しません。キャッシュからいくつかのものが読み込まれます)。画像の

レスポンスヘッダを読み:程度に探し

Date    Wed, 18 Mar 2009 11:42:02 GMT 
Server   Apache/2.2.3 (Red Hat) 
Last-Modified  Mon, 27 Oct 2008 19:19:47 GMT 
Etag    "1abb7d7-292-45a41039f7ac0" 
Accept-Ranges  bytes 
Content-Length 658 
Cache-Control  max-age=7257600 
Expires   Thu, 15 Apr 2010 20:00:00 GMT 
Connection  close 
Content-Type  image/png 

:キャッシュを表示/非表示のクリック間のキャッシュを検査するものの、ロードされた画像のほとんどは(そこに記載されているように見え、そこに表示されます)の画像が欠落する:Firefoxは、我々はネットワーク呼び出し上で簡単に行くことができますので、キャッシュからこれらのイメージをリロードするために私から

Number of entries: 462 
Maximum storage size: 50000 KiB 
Storage in use:  5593 KiB 

... 

Key: http://domain.com/23_a.png 
Data size: 16139 bytes 
Fetch count: 13 
Last modified: 2009-03-18 07:40:14 
Expires: 2009-06-10 07:40:00 

何を期待していますか?ありがとうございました!


更新

私は最初のタブで表示/非表示の後に新しいタブでこのページを開く場合は、2番目のタブにはネットワーク要求を行うものではありません。最初のタブは引き続きネットワーク要求を行います。

答えて

1

Firefoxがこのように動作している(または、この動作を無効にする方が良い)理由がわかりませんが、私はこの問題を回避する別の方法を提案します。 html文字列を何度も繰り返し作成し、domからこれらのimg要素を完全に削除するのではなく、一度外側のコンテナdivを作成してdivを表示/非表示にするのはなぜですか?このように、imgは常にdomの一部です(そして、Firefoxはキャッシュから画像を削除する必要性をほとんど感じないでしょう)。

+0

ありがとうございます。しかし、(1)サイトに戻ったときに、画像をキャッシュから再ロードしたい。 (2)画像もフラッシュで使用されているので、表示/非表示で問題が完全に解決されるわけではありません。 – jedierikb

1

さらにリッチの答えに、あなたには、いくつかのFirefoxのキャッシュconfig valuesを変更しようと、彼らは行動を変えるかどうかを確認できます。

browser.cache.check_doc_frequency 
browser.cache.disk.capacity 
browser.cache.memory.capacity 
1

、キャッシュヒットを除去するためのページのパフォーマンスをスピードアップするために、そして減らすために別の方法ネットワークの輻輳(一般に、一度に1ドメインにつき2つの要求しか実行されません)は、CSS Spritesを使用することになります。

画像がすべて同じサイズの場合は、画像の一部を組み合わせてCSSを使用して、表示する画像の位置を制御します。追加イメージごとにHTTPリクエストを保存し、大幅にページを拡張します。多くのより大きなウェブサイト(Yahoo!など)はこの手法を使用しています。

+0

良い提案(私たちはいくつかの画像をCSSスプライトスライスしています)。しかし、これはキャッシングの問題を解決しません。我々はまだ多くの画像を読み込む必要があります... – jedierikb

関連する問題