2009-03-18 4 views
4

Tenir compte de la page HTML suivante, qui peut charger dans de nombreux fichiers volumineux .png:cache du navigateur contourné dans 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> 

Dans IE, Safari & Opera sur une machine Windows, les images sur cette page sont une seule fois chargées (suivis avec FreeMeter) lorsque les boutons show et hide sont basculés.

Cependant, dans Firefox (fraîchement installé), certaines images sont chargées à partir du serveur plusieurs fois (nous ne correspondons jamais au pic initial dans les requêtes réseau ... quelques éléments sont chargés à partir du cache).

Les en-têtes de réponse des images lues:

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 

Regarder dans about: cache, la plupart des images chargées semblent y figurer (bien inspecter le cache entre le masquage/clics show, il apparaît à images manquantes):

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 

Qu'est-ce qui attend de moi firefox recharger ces images à partir du cache afin que nous puissions aller facilement sur les appels réseau? Je vous remercie!


Mise à jour

Si j'ouvre cette page dans un nouvel onglet après avoir montré/caché dans le premier onglet, le deuxième onglet ne fait aucune demande de réseau. Le premier onglet continue de faire des demandes de réseau.

Répondre

1

Je ne peux pas vous dire pourquoi Firefox se comporte de cette façon (ou mieux encore, comment contourner ce comportement), mais je suggérerais une approche différente qui pourrait contourner le problème. Au lieu de construire la chaîne html encore et encore et en supprimant complètement ces éléments img de la dom, pourquoi ne pas simplement le construire une fois avec un div conteneur externe et afficher/masquer la div? De cette façon, les img font toujours partie de la dom (et Firefox ne ressentira probablement pas le besoin de retirer les images du cache).

+0

Merci pour la suggestion. Cependant: (1) en revenant sur le site, je voudrais que les images soient rechargées à partir du cache. (2) les images sont également utilisées par flash, alors les afficher/masquer ne résout pas complètement mon problème. – jedierikb

1

De plus à la réponse de Rich, vous pouvez essayer de changer une cache de Firefox config values et voir si elles modifient le comportement:

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

Une autre façon de supprimer le succès de cache pour accélérer les performances de la page, et de réduire l'encombrement du réseau (en général, seules deux requêtes par domaine s'exécutent à la fois) serait d'utiliser CSS Sprites.

Si toutes vos images ont une taille similaire, combinez-les et utilisez le CSS pour contrôler la position de l'image. Vous sauvegarderez les requêtes HTTP pour chaque image supplémentaire et améliorerez considérablement la page. De nombreux sites Web plus importants (tels que Yahoo!) utilisent cette technique.

+0

Bonne suggestion (et nous faisons css-sprite-découper certaines de nos images). Cependant, cela ne résout pas le problème de mise en cache. Nous avons encore besoin de charger beaucoup d'images ... – jedierikb