Helfen Sie mit aggressiven JavaScript-caching

https://stackoverflow.com/questions/54475

09-06-2019
|

Frage

Ich habe laufen in ein problem, wo ich änderungen vornehmen, um ein paar JavaScript-Dateien, auf die verwiesen wird in eine HTML-Datei, aber der browser nicht sehen, die änderungen.Es hält an der Kopie im Cache des Browsers abgelegt, obwohl der server eine neuere version.

Nicht, bis ich die Kraft der browser den cache zu löschen kann ich die änderungen sehen zu können.

Ist das ein web-server-Konfiguration?Brauche ich, um meine JavaScript-Dateien nie cache?Ich habe gesehen, einige interessante Techniken in der Google Web Toolkit wo Sie tatsächlich erstellen Sie eine neue JavaScript-Dateinamen jedes mal, wenn ein update gemacht wird.Ich glaube, dies ist zu verhindern, dass proxies und Browser das halten die alten Versionen des JavaScript-Dateien mit dem gleichen Namen.

Gibt es eine Liste von best practices irgendwo?

Lösung

Wir hängen Sie ein Produkt Build-Nummer an das Ende aller Javascript (und CSS etc.) wie folgt:

<script src="MyScript.js?4.0.8243">

Browser ignoriert alles nach dem Fragezeichen, aber Upgrades verursacht eine neue URL, was bedeutet, Cache-reload.

Dies hat den zusätzlichen Vorteil, dass Sie HTTP-Header festlegen können, bedeuten „nie Cache!“

Andere Tipps

Es hält auf die Kopie im Browser im Cache gespeichert, auch wenn der Web-Server eine neuere Version hat.

Dies ist wahrscheinlich, weil die HTTP Verfällt / Cache-Control-Header festgelegt werden.

http://developer.yahoo.com/performance/rules.html#expires

ich darüber schrieb hier:

http://www.codinghorror.com/blog/archives/000932.html

Das ist nicht schlecht beraten, per se, aber es kann große Probleme verursachen, wenn Sie es falsch ist. In Microsofts IIS zum Beispiel Verfällt der Header wird immer standardmäßig deaktiviert, wahrscheinlich aus diesem Grunde. Expires Header auf HTTP-Ressourcen durch zu setzen, haben Sie den Client zu sagen nie auf neue Versionen überprüft diese Ressource - zumindest nicht, bis das Ablaufdatum auf dem Expires-Header. Wenn ich nie sagen, ich meine es - der Browser nicht einmal wird fragen für eine neue Version; es wird nur gut seine Cache-Version ist davon ausgehen, zu gehen, bis der Client den Cache löscht, oder die Cache erreicht das Ablaufdatum. Yahoo stellt fest, dass sie die Dateinamen dieser Ressourcen zu ändern, wenn sie sie aufgefrischt müssen.

Alles, was Sie wirklich hier sparen, ist die Kosten für den Client den Server für eine neue Version Pingen und 304 nicht geändert Header zurück in den gemeinsamen Fall bekommen, dass die Ressource nicht geändert hat. Das ist nicht viel Aufwand .. es sei denn, Sie Yahoo sind. Sicher, wenn Sie eine Reihe von Bildern oder Skripte, die so gut wie nie, auf jeden Fall Client-Caching ausnutzen ändern und schalten Sie den Cache-Control-Header. Caching ist entscheidend für die Browser-Leistung; jeder Web-Entwickler sollten ein tiefes Verständnis davon haben, wie HTTP funktioniert das Caching. Aber verwenden Sie es nur in einem chirurgischen, eingeschränkt für diese bestimmte Ordner oder Dateien, die profitieren können. Für alles andere, das Risiko überwiegt den Nutzen. Es ist sicherlich nicht etwas, das Sie auf als Decke Standard für Ihre gesamte Website gedreht werden sollen .. es sei denn, Sie wie Dateinamen jedes Mal der Inhalt ändert ändern.

@ Jason und Darren

~~IE6~~ behandelt alles mit einem Query-String als uncachebar. Sie sollten eine anderen Weg finden Sie die Versionsnummer in die URL, wie ein gefälschtes Verzeichnis zu erhalten:

<script src="/js/version/MyScript.js"/>

und entfernen Sie genau die erste Verzeichnisebene nach js auf der Serverseite, bevor die Anforderung zu erfüllen.

EDIT: Sorry, alle; es ist Squid, nicht IE6, die mit einer Abfragezeichenfolge wird nicht zwischenspeichern. Weitere Informationen hier .

Ich habe eine Blog-Post über geschrieben, wie wir dieses Problem hier wanden:

Vermeidung von JavaScript und CSS-Stylesheet-Caching Probleme in ASP.NET

Im Wesentlichen während der Entwicklung können Sie eine Zufallszahl auf einen Query-String nach dem Dateinamen Ihrer CSS-Datei hinzufügen. Wenn Sie einen Release-Build zu tun, schaltet sich der Code Ihrer Assembly Revisionsnummer statt zu verwenden. Dies bedeutet, dass in der Produktionsumgebung, Ihre Kunden die Stylesheet-Cache, aber wenn Sie eine neue Version der Website veröffentlichen werden sie gezwungen werden, um die Datei neu zu laden.

Ich bin auch die Methode der Dinge nur die Umbenennung. Es fällt nie aus, und ist ziemlich einfach zu tun.

ist der Webserver die richtigen Header sendet den Browser zu sagen, dass es eine neue Version hat? Ich habe auch das Datum ein, bevor mit dem Abfragezeichenfolgeflag. dh myscripts.js? date = 4/14/2008 12:45:03 (nur würde das Datum codiert)

@Darren Das Caching-Problem hat sowohl IIS aufgetreten 6 & Apache 2 out-of-the-box. Ich bin mir nicht sicher, ob die richtige Auflösung ist die HTTP-Antwort-Header zu ändern, sondern die Umbenennung Route hier in ein paar der Antworten beschrieben zu nehmen.

@ Chris Guter Tipp. Ich dachte, der Query-String-Ansatz war gut, aber es klingt wie ein eindeutiger Datei- oder Verzeichnisnamen notwendig ist, alle Fälle abzudecken.

Mit jeder neuen Version haben wir einfach prepend eine monoton ansteigende Ganzzahl in den Root-Pfad aller statischen Vermögenswerte, die den Client zwingt, neu zu laden (wir haben, bevor Sie die Query-String-Methode Pause in IE6 gesehen). Zum Beispiel:

Version 1: http://www.foo.com/1/js/foo.js
Version 2: http://www.foo.com/2/js/foo.js

Es erfordert rejiggering Links mit jedem Release, aber wir haben Funktionalität gebaut, um automatisch die Links in unsere Bereitstellungstools zu ändern.

Wenn Sie dies tun, können Sie Ablaufdatum / Cache-Control-Header verwenden, das die Client-Cache JS Ressourcen „für immer“ lassen, da der Pfad mit jeder Version ändert, was meiner Meinung nach ist das, was @JasonCohen hinauswollte.

Einige sehr nützliche Techniken in hier auch wenn Sie planen, nicht zu verwenden Powershell-Bereitstellung zu automatisieren.

Für das, was es wert ist, ich sah deviantART Ort, ganz ein großer, dient ihre JS-Dateien als 54504.js. Ich habe gerade überprüft und sehen sie jetzt, sie als v6core.css dienen? -5855446573 v6core_jc.js? 4150339741 etc.

Wenn das Problem der Query-String vom Server kommt, nehme ich an Sie, dass mehr oder weniger kontrollieren können.

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow