4

多くの大きなpngファイルをロードできる次のhtmlページについて考えてみます。

<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://example.com/" + i + "_a.png'><br>";
                loadMe += "<img src='http://example.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マシンのIE、Safari、Operaでは、このページの画像は、表示ボタンと非表示ボタンが切り替えられたときに一度だけ読み込まれます（FreeMeterで監視されます）。

ただし、Firefox（新しくインストールされた）では、一部の画像がサーバーから複数回読み込まれます（ネットワーク要求の最初のピークと一致することはありません...いくつかのものがキャッシュから読み込まれます）。

画像の応答ヘッダーは次のとおりです。

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

調べてみると、ロードされた画像のほとんどがそこにリストされているように見えます（ /クリックabout:cache間のキャッシュを調べても、画像が欠落しているように見えます）。hideshow

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

...

Key: http://example.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

Firefoxは、これらの画像をキャッシュからリロードして、ネットワーク呼び出しを簡単に行えるようにすることを期待していますか？ありがとうございました！

アップデート

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

4

4 に答える 4

1

Firefoxがこのように動作している理由（または、さらに良いのは、この動作をオーバーライドする方法）を説明することはできませんが、問題を回避する可能性のある別のアプローチを提案します。HTML文字列を何度も作成し、これらのimg要素をDOMから完全に削除する代わりに、外部コンテナdivやshow/を使用hideして一度だけ作成してみませんdivか？このように、imgsは常にDOMの一部です（Firefoxはキャッシュから画像を削除する必要性を感じない可能性が高いです）。

于 2009-03-18T12:10:31.073 に答える
1

リッチの答えに加えて、Firefoxのキャッシュ構成値を変更して、動作が変わるかどうかを確認することができます。

browser.cache.check_doc_frequency
browser.cache.disk.capacity
browser.cache.memory.capacity
于 2009-03-18T12:14:32.560 に答える
1

キャッシュ ヒットを取り除き、ページのパフォーマンスを高速化し、ネットワークの輻輳を軽減する別の方法 (一般的に言えば、一度にドメインごとに 2 つの要求のみが実行されます) は、CSS スプライトを使用することです。

すべての画像が同様のサイズである場合は、それらのいくつかを結合し、CSS を使用して画像の表示位置を制御します。追加の画像ごとに HTTP リクエストを保存し、ページを大幅に強化します。多くの大規模な Web サイト (Yahoo! など) では、この手法が使用されています。

于 2009-03-18T12:27:15.540 に答える