2010-03-02 6 views
8

Y a-t-il un moyen en JavaScript de dire si une ressource est déjà dans le cache du navigateur?Comment puis-je savoir quand une ressource de page Web est mise en cache?

Nous analysons une partie de nos pages vues côté client afin d'obtenir de meilleures données sur la vitesse de chargement des pages pour nos utilisateurs. La première fois que les utilisateurs arrivent sur notre site, un certain nombre de ressources (JS, CSS, images) sont mises en cache par le navigateur, de sorte que leur pageview initiale sera plus lente que les suivantes.

À l'heure actuelle, ces données sont mélangées, il est donc difficile de dire un chargement de page initial à partir d'une page suivante qui est lent pour une autre raison. J'adorerais utiliser un navigateur inter-navigateur pour voir si le cache est déjà amorcé, de sorte que je puisse séparer les deux sortes de pages vues et les analyser séparément.

Répondre

4

Il n'y a pas d'API JavaScript pour vérifier si une ressource est mise en cache. Je pense que le mieux que vous puissiez faire est de vérifier combien de temps il faut pour charger les ressources, et de seau ceux avec des temps de chargement plus courts ensemble.

En haut de la page:

<script>var startPageLoad = new Date().getTime();</script> 

Sur chaque ressource:

<img src="foo.gif" onload="var fooLoadTime = startPageLoad - new Date().getTime()"> 
<script src="bar.js" onload="var barLoadTime = startPageLoad - new Date().getTime()"> 

Quand le rapport des temps de chargement:

var fooProbablyCached = fooLoadTime < 200; // Took < 200ms to load foo.gif 
var barProbablyCached = barLoadTime < 200; // Took < 200ms to load bar.gif 

Vous pouvez avoir besoin d'utiliser onReadyStateChange événements au lieu de onload dans IE.

+0

Merci, Annie. Certains navigateurs sont bizarres lorsque vous mélangez des blocs de script et chargez des ressources externes, donc cela peut avoir un impact sur les téléchargements parallèles, je vais essayer et voir –

+0

Salut William, en regardant le navigateur, ça ressemble à ce que vous voulez regarder out for est une feuille de style immédiatement suivie d'un script en ligne: http://www.browserscope.org/?v=top&category=network (Les autres problèmes de téléchargement parallèle s'appliquent tous aux scripts externes) – Annie

+0

Mon serveur compte une variable et envoie avec l'en-tête Content-MD5 Le script client vérifie si l'en-tête Content-MD5 existe et est supérieur à ce qui était le cas auparavant, si la réponse n'est pas mise en cache. pour raison de sécurité. –

0

Vous avez besoin d'un plug-in pour cela. Firebug peut vous dire sur l'onglet "NET", une fois que vous l'installez (pour Firefox). JavaScript lui-même ne peut pas voir le trafic HTTP du navigateur.

+1

Comme je le mentionne dans la question, je fais de l'instrumentation côté client sur les pages vues réelles. Il est peu probable que j'obtienne beaucoup de nos utilisateurs pour installer Firebug, en particulier ceux qui n'utilisent pas Firefox. –

+3

Ne pas aimer la vérité n'est pas une raison pour un vote négatif. Merci. :( –

+2

Votre réponse pourrait être bonne sur une question différente, mais ce n'est pas utile ici.Assurez-vous que la réponse la plus utile est en haut de la page semble un usage raisonnable de haut et en bas de vote pour moi –

Questions connexes