2009-03-18 5 views
4

Betrachten Sie die folgende HTML-Seite, die in vielen großen png-Dateien laden kann:Browser-Cache in Firefox umgangen?

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

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

Allerdings, in Firefox (frisch installiert), einige Bilder werden vom Server mehrmals geladen (wir entsprechen nie den anfänglichen Höhepunkt in Netzwerkanforderungen ... ein paar Dinge werden aus dem Cache geladen).

Die Response-Header der Bilder lesen:

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 

in über die Suche: Cache, die meisten der Bilder erscheinen geladen dort aufgelistet werden (obwohl zwischen hide/show Klicks, um die Cache-Inspektion, es erscheint fehlende Bilder) werden:

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 

Was von mir Firefox erwartet diese Bilder aus dem Cache zu laden, so dass wir einfach auf die Netzwerk-Anrufe gehen? Vielen Dank!


aktualisiert

Wenn ich diese Seite in einem neuen Tab öffnen, nachdem zeigen/in dem ersten Registerkarte versteckt, macht der zweite Registerkarte keine Netzwerkanforderungen. Auf der ersten Registerkarte werden weiterhin Netzwerkanforderungen gestellt.

Antwort

1

Ich kann Ihnen nicht sagen, warum Firefox sich so verhält (oder besser, wie Sie dieses Verhalten überschreiben), aber ich würde einen anderen Ansatz vorschlagen, der das Problem umgehen könnte. Anstatt die HTML-Zeichenfolge immer wieder zu erstellen und diese img-Elemente vollständig aus dem Dom zu entfernen, warum sollte man sie nicht einfach einmal mit einem äußeren Container-div erstellen und das div anzeigen/verstecken? Auf diese Weise sind die IMGs immer Teil des Doms (und Firefox wird wahrscheinlich nicht das Bedürfnis haben, die Bilder aus dem Cache zu entfernen).

+0

Danke für den Vorschlag. Allerdings: (1) Nach dem Zurückkehren zur Site möchte ich, dass die Bilder erneut aus dem Cache geladen werden. (2) Die Bilder werden auch von Flash verwendet, also zeigen/verbergen sie mein Problem nicht vollständig. – jedierikb

1

Zusätzlich zu Richs Antwort, könnten Sie versuchen, einig Firefox-Cache config values zu ändern und sehen, ob sie das Verhalten ändern:

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

Eine andere Möglichkeit, den Cache-Treffer zu entfernen, Seite Leistung zu beschleunigen und zu reduzieren, Netzwerküberlastung (im Allgemeinen nur zwei Anfragen pro Domäne gleichzeitig ausgeführt werden) wäre CSS Sprites zu verwenden.

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. Sie speichern die HTTP-Anforderungen für jedes weitere Bild und verbessern die Seite drastisch. Viele größere Websites (wie Yahoo!) verwenden diese Technik.

+0

Guter Vorschlag (und wir css-sprite-slice einige unserer Bilder). Dies löst jedoch nicht das Caching-Problem. Wir müssen immer noch viele Bilder laden ... – jedierikb