4 Stimmen

Browser-Cache in Firefox umgangen?

Betrachten Sie die folgende HTML-Seite, die viele große png-Dateien laden kann:

<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>

In IE, Safari und Opera auf einem Windows-Rechner werden die Bilder auf dieser Seite nur einmal geladen (überwacht mit FreeMeter), wenn die Schaltflächen zum Ein- und Ausblenden umgeschaltet werden.

Aber in Firefox (frisch installiert), einige Bilder werden mehrfach vom Server geladen (wir erreichen nie die anfängliche Spitze bei den Netzwerkanfragen... einige Dinge werden aus dem Cache geladen).

Die Antwort-Header der Bilder lauten:

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

Blick in about:cache scheinen die meisten der geladenen Bilder dort aufgelistet zu sein (obwohl eine Inspektion des Cache zwischen hide / show Klicks, es scheinen Bilder zu fehlen):

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

Was erwartet Firefox von mir, um diese Bilder aus dem Cache neu zu laden, damit wir die Netzwerkaufrufe schonen können? Ich danke Ihnen!


Update

Wenn ich diese Seite in einer neuen Registerkarte öffne, nachdem ich sie in der ersten Registerkarte ein- oder ausgeblendet habe, stellt die zweite Registerkarte keine Netzwerkanforderungen. Die erste Registerkarte stellt weiterhin Netzwerkanfragen.

3voto

jedierikb Punkte 12091

Der Fehler wird beschrieben aquí

1voto

Rich Punkte 35534

Ich kann Ihnen nicht sagen, warum Firefox sich so verhält (oder besser noch, wie Sie dieses Verhalten umgehen können), aber ich würde einen anderen Ansatz vorschlagen, der das Problem umgehen könnte. Anstatt die HTML-Zeichenkette immer wieder neu zu erstellen und diese img Elemente aus dem DOM, warum nicht einfach einmal mit einem äußeren Container bauen div y show / hide die div ? Auf diese Weise kann die img s sind immer Teil des DOM (und Firefox wird es höchstwahrscheinlich nicht für nötig halten, die Bilder aus dem Cache zu entfernen).

1voto

schnaader Punkte 47961

Zusätzlich zu Richs Antwort könnten Sie versuchen, einige Firefox-Caches zu ändern Konfigurationswerte und sehen, ob sie das Verhalten ändern:

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

1voto

Some Canuck Punkte 826

Eine andere Möglichkeit, den Cache-Treffer zu beseitigen, die Seitenleistung zu beschleunigen und die Netzwerküberlastung zu verringern (im Allgemeinen werden nur zwei Anfragen pro Domain gleichzeitig ausgeführt), wäre die Verwendung von CSS-Sprites .

Wenn alle Ihre Bilder eine ähnliche Größe haben, kombinieren Sie einige von ihnen und verwenden Sie CSS, um zu steuern, welche Position des Bildes angezeigt wird. So sparen Sie die HTTP-Anfragen für jedes zusätzliche Bild und verbessern die Seite drastisch. Viele größere Websites (wie Yahoo!) verwenden diese Technik.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X