Versionsnummern in CSS- und JS-Links in HTML (Cache aktualisieren)

Versionsnummern in CSS- und JS-Links in HTML (Cache aktualisieren)

Hintergrund
Suchen Sie in der Suchmaschine nach dem Schlüsselwort „.htaccess-Cache“, und Sie finden zahlreiche Tutorials zum Einrichten des Website-Dateicaches. Durch das Einrichten können Sie CSS, JS und andere Dateien, die im Browser nicht häufig aktualisiert werden, zwischenspeichern, sodass der Browser bei jedem Besuch Ihrer Website CSS, JS usw. aus dem Browsercache abrufen kann, anstatt sie von Ihrem Server zu lesen. Dies beschleunigt das Öffnen der Website bis zu einem gewissen Grad und spart Ihren Serververkehr.

Frage
Jetzt kommt das Problem. Die von .htaccess festgelegten CSS- und JS-Caches haben eine Ablaufzeit. Wenn CSS und JS im Browser des Besuchers zwischengespeichert wurden, liest der Browser CSS und JS nur aus dem Cache, bevor diese CSS- und JS-Caches ablaufen. Wenn Sie CSS und JS auf dem Server ändern, werden diese Änderungen im Browser wiederkehrender Kunden nicht geändert, es sei denn, der wiederkehrende Kunde drückt Strg + F5, um Ihre Website-Seite zu aktualisieren, oder löscht den Browser-Cache manuell. Eine Website hat Zehntausende Besucher, von denen viele wiederkehrende Besucher sind. Sie können nicht jeden Besucher auffordern, den Cache nach der Aktualisierung des CSS zu aktualisieren. Wie würden Sie also mit diesem Problem umgehen?

Methode 1

CSS-Dateinamen ändern: Eigentlich ist die Lösung für dieses Problem ganz einfach. Der Cache kennzeichnet den zwischengespeicherten Inhalt über den Dateinamen. Nachdem Sie den CSS-Dateiinhalt der Website aktualisiert haben, ändern Sie einfach den CSS-Dateinamen. Beispielsweise lautet die CSS-Aufrufanweisung im ursprünglichen HTML wie folgt:


Code kopieren
Der Code lautet wie folgt:
<link rel="stylesheet" href="style.css" />

Ändern Sie einfach den CSS-Dateinamen:


Code kopieren
Der Code lautet wie folgt:
<link rel="stylesheet" href="index.css" />

Eine andere Möglichkeit, den CSS-Dateinamen zu ändern, besteht darin, die Versionsnummer in den Dateinamen zu schreiben, zum Beispiel:


Code kopieren
Der Code lautet wie folgt:
<link rel="stylesheet" href="index.v2011.css" />

Nachdem die CSS-Datei aktualisiert wurde, ändern Sie einfach die Versionsnummer im Dateinamen:


Code kopieren
Der Code lautet wie folgt:
<link rel="stylesheet" href="index.v2012.css" />

Methode 2
Fügen Sie der CSS-Datei eine Versionsnummer hinzu: Tatsächlich ist es etwas mühsam, den CSS-Dateinamen jedes Mal zu ändern, wenn die CSS-Datei geändert wird. Dann können wir der geladenen CSS-Anweisung (also dem Inhalt nach ? im CSS-Link) eine Versionsnummer hinzufügen. Beispielsweise lautet die CSS-Aufrufanweisung im ursprünglichen HTML wie folgt:


Code kopieren
Der Code lautet wie folgt:
<link rel="stylesheet" href="style.css?v=2011" />

Ändern Sie einfach die Versionsnummer der CSS-Datei auf 2012:


Code kopieren
Der Code lautet wie folgt:
<link rel="stylesheet" href="style.css?v=2012" />

Beachten Sie, dass einige Proxy-Cache-Server keine Ressourcen zwischenspeichern, die „?“ in der URL enthalten. Daher kann Methode 2 dazu führen, dass Ihre ursprüngliche Cache-Funktion fehlschlägt. Sie können stattdessen Methode 1 verwenden.

Zusammenfassen

Tatsächlich hat das Fragezeichen nach der CSS-Datei keine praktische Auswirkung und kann nur als Suffix verwendet werden. Wenn Sie die Methode mit Fragezeichen und Parameter verwenden, können Sie die Versionsnummer und andere Informationen hinzufügen und gleichzeitig den Browser-Cache aktualisieren. Ein kleines Detail kann uns großen Komfort bringen.

<<:  Lösung für das Problem „VMware-virtuelle Maschine ohne Netzwerk“

>>:  Detaillierte Analyse der verschiedenen Hintergründe, Nutzungsszenarien und Techniken von CSS

Artikel empfehlen

HTML-Tutorial: Definitionsliste

<br />Originaltext: http://andymao.com/andy/...

Implementierung der Benutzerregistrierungsfunktion mit js

In diesem Artikelbeispiel wird der spezifische Co...

Grundlegendes Verständnis und Verwendung der HTML-Auswahloption

Detaillierte Erklärung von HTML (Option auswählen)...

Ein kurzes Verständnis der MySQL SELECT-Ausführungsreihenfolge

Die vollständige Syntax der SELECT-Anweisung laut...

So lösen Sie das Problem, dass MySQL nicht geschlossen werden kann

Lösung, wenn MySQL nicht geschlossen wird: Klicke...

Analyse der Unfallursachen durch Unicode-Signatur BOM

Möglicherweise verwenden Sie hier Include-Dateien,...

Implementierung der DOM-Operation in React

Inhaltsverzeichnis Vorherige Wörter Anwendungssze...

CSS löst das Problem der Front-End-Bildverformung perfekt

Ich habe in der Toutiao IT School einen Artikel g...

Implementieren einer benutzerdefinierten Bildlaufleiste mit nativem JS

In diesem Artikelbeispiel wird der spezifische JS...

Beispiel für die horizontale Anordnung von li-Tags in HTML

Die meisten Navigationsleisten sind horizontal an...

Detaillierte Erklärung der Anzeigeeigenschaft im CSS-Beschriftungsmodus

Der Code sieht folgendermaßen aus: <!DOCTYPE h...

Detaillierte Erläuterung des vite2.0-Konfigurationslernens (Typescript-Version)

einführen Die ursprünglichen Worte von You Yuxi. ...