Wie kann ich feststellen, ob eine Webseiten-Ressource zwischengespeichert ist?

Question

Gibt es einen Weg in JavaScript, um festzustellen, ob eine Ressource bereits im Browsercache vorhanden ist?

Wir instrumentieren einen Teil unserer clientseitigen Seitenaufrufe, um bessere Daten darüber zu erhalten, wie schnell Seiten für unsere Benutzer geladen werden. Wenn Benutzer das erste Mal auf unserer Website ankommen, werden eine Vielzahl von Ressourcen (JS, CSS, Bilder) vom Browser zwischengespeichert, sodass ihr initialer Seitenaufruf langsamer sein wird als nachfolgende.

Derzeit sind diese Daten gemischt, sodass es schwer ist, einen initialen Seitenaufruf von einem nachfolgenden Seitenaufruf zu unterscheiden, der aus einem anderen Grund langsam ist. Ich würde gerne eine plattformübergreifende Möglichkeit haben, um zu überprüfen, ob der Cache bereits vorbereitet ist, damit ich die beiden Arten von Seitenaufrufen separat analysieren kann.

Answer 1

Sie sollten TransferSize verwenden:

window.performance.getEntriesByName("https://[resource-name].js")[0].transferSize

Zur Überprüfung können Sie die obige Zeile in Chrome ausführen...

• Wenn der Browser das Zwischenspeichern aktiviert hat und Ihre Ressource zuvor mit einem ordnungsgemäßen cache-control-Header geladen wurde, sollte transferSize 0 sein.
• Wenn Sie das Zwischenspeichern deaktivieren (Netzwerk-Tab -> Cache deaktivieren) und neu laden, sollte transferSize > 0 sein.

Answer 2

Es gibt keine JavaScript-API zum Überprüfen, ob eine Ressource zwischengespeichert ist. Ich denke, das Beste, was Sie tun können, ist zu überprüfen, wie lange es gedauert hat, die Ressourcen zu laden, und diejenigen mit kürzeren Ladezeiten zusammenzufassen.

Am oberen Rand der Seite:

var startPageLoad = new Date().getTime();

Für jede Ressource:

</code></pre>

<p>Beim Berichten von Ladezeiten:</p>

<pre><code>var fooProbablyCached = fooLoadTime < 200; // Hat weniger als 200 ms gedauert, um foo.gif zu laden
var barProbablyCached = barLoadTime < 200; // Hat weniger als 200 ms gedauert, um bar.gif zu laden
</code></pre>

<p>Sie müssen möglicherweise onreadystatechange-Ereignisse anstelle von onload in IE verwenden.</p></x-turndown>

Answer 3

Sie benötigen ein Plug-In, um dies zu tun. Firebug kann Ihnen auf dem Tab "NET" sagen, sobald Sie es installiert haben (für Firefox). JavaScript selbst kann nicht den HTTP-Verkehr des Browsers sehen.