2012-10-25 4 views
6

Auf meiner Produktseite erkennt Firefox manchmal keine Änderungen in meinem CSS & Javascript-Code. Eher lädt es die alten Versionen, also scheint es, dass ich den Cache löschen muss. In so einer Situation, was soll ich tun? Dies bezieht sich auf den neuesten Firefox (16.0.1 zum Zeitpunkt der Erstellung dieses Dokuments).Warum speichert Firefox meinen CSS- und Javascript-Code manchmal, obwohl er sich geändert hat?

EDIT!

Ich habe vergessen, es Fehler für die Localhost CSS-Dateien zu sagen. Ich meinte, es gibt eine alte js-Datei, ich aktualisiere sie, lade sie hoch, und auf dem Produktserver denkt firefox über die localhost-Datei. So wie ich Include-Dateien:

<link rel="stylesheet" href="/xyz.css" type="text/css" /> 

Antwort

10

Wenn Sie eine serverseitige Sprache verwenden, können Sie einen Trick verwenden. Sie können eine Zeichenfolge nach .css/.js anhängen. In PHP zum Beispiel:

<link rel="stylesheet" type="text/css" href="/style.css?t=<?= time(); ?>" /> 

Es ändert sich jede Seite neu laden.

Werfen Sie einen Blick auf diesen Artikel über cache busting.

+2

Dies (Cache-Busting) ist bei weitem der beste Ansatz! – nickhar

+2

Oh ja! Es funktioniert ... aber in der Produktion könnte das Laden der Seite beschleunigen – jan267

+2

Wahr, ich habe nur Versionsnummern in der Produktion angewendet, aber dev-enviro ist ein Muss :) – nickhar

9

Sie können eine Technik „Cache-Busting“ genannt verwenden, wo Sie eine Abfragezeichenfolge auf Ihren Anruf zu Ihrem css/js Datei anhängen. Sie aktualisieren dann die Abfragezeichenfolge, wenn Sie Ihre CSS/JS aktualisieren.

Beispiel:

<link rel="stylesheet" type="text/css" href="/styles.css?ver=1" /> 
2

Sie eine Version am Ende der css/js Sie accross senden anhängen können.

Für Beispiel

Statt www.foo.com/js/javascript.js, senden www.foo.com/js/javascript.js?v=1 und
Statt www.foo.com/css/style.css, senden www.foo.com/css/style.js?v=1

1

einfach klar muss der Cache oder hart refresh (Strg + F5) Ich habe Angst.

Eine andere Möglichkeit besteht darin, einfach den Dateinamen der JS- oder CSS-Datei zu ändern, damit FF sie nicht als zwischengespeicherte Datei erkennt (z. B. style.css in style2.css umbenennen).

1

style.css?randomnumber wird asure das Laden

2
  • Sie können einen Meta-Tag verwenden, um die Auffrischung zu erzwingen. <meta http-equiv="Cache-control" content="no-cache"> oder <meta http-equiv="pragma" content="no-cache">.
  • Sie können den HTTP-Header erzwingen: Cache-control: no-cache oder Pragma: no-cache.
  • Sie können eine zufällige Abfragezeichenfolge an Ihre CSS- und JavaScript-Dateien anhängen.
+1

Der no-Cache ist nicht die beste Option für die Leistung. Sie werden einen Schlag auf Seitengeschwindigkeiten nehmen. –

+1

Ich stimme Ihnen zu, Herr. – Tim

3

Wie in einigen anderen Antworten erwähnt möchten Sie basierend auf dem Inhalt das heißt, die Kennung ändert sich, wenn und nur dann, wenn sich der Inhalt ändert eine eindeutige Kennung für Ihre statische Vermögenswerte haben. Auf diese Weise können Browser immer noch eine zwischengespeicherte Version einer Ressource verwenden, solange sich der Inhalt nicht geändert hat - was genau Sie wollen. Diese Technik wird statische Asset-Versionierung genannt.

Verwenden Sie nicht die aktuelle Zeit oder eine Zufallszahl/Zeichenfolge. Wenn Sie können, verwenden Sie entweder die Änderungszeit der Datei oder (besser) den MD5-Hash seines Inhalts. Sie können diese Kennung als Abfragezeichenfolge anhängen (die ignoriert wird) oder (better) an den Dateinamen vor der Erweiterung anhängen.

dies mit, um den Kontrast und die Verwirrung über die Technik der cache busting in einigen anderen Antworten klar erwähnt: Cache Zerschlagung ist eine Technik, die von Werbetreibenden verwendet, um den Browser zu zwingen, immer eine Ressource neu zu laden, so dass die Werbetreibenden die Anzahl der messen Anzeigenimpressionen nach der Anzahl der angeforderten Ressourcen. Dies wird leicht durch Verwendung einer Zufallszahl erreicht. Sie nicht normalerweise möchten Sie dies für Ihre statische Vermögenswerte verwenden.

Verwandte Themen