Eine einfache Möglichkeit, den CSS-, JavaScript- und Hintergrundbild-Cache im Browser zu leeren
|
Im eigentlichen Projektentwicklungsprozess wird die Seite auf den Server hochgeladen. Um die Belastung des Servers zu verringern und den Benutzern weniger Ladezeit zu ermöglichen, speichert der Browser Bilder, CSS und JS lokal im Cache, um sie beim nächsten Besuch der Website zu verwenden. Dadurch wird nicht nur die Belastung des Servers verringert, sondern auch die Anzahl der Downloads für die Benutzer reduziert, was zu einem besseren Benutzererlebnis führt. Beim Upgrade der Version oder bei einigen Anpassungen an CSS, JS usw. führt der Cache jedoch dazu, dass Benutzer den aktualisierten Stil nicht anzeigen können, was Probleme bereitet. Sofern der Benutzer den Cache nicht manuell aktualisiert, werden fast alle Benutzer den Cache nicht manuell leeren, um normal auf die Website zuzugreifen, da sie nicht wissen, ob es sich um ein Cache-Problem handelt. Letztendlich denken die Benutzer einfach, dass es ein Problem mit Ihrer Seite gibt und sie nicht normal aufgerufen werden kann. Um den Cache normal zu verwenden und solche Probleme zu vermeiden, können wir unseren Verstand nutzen und darüber nachdenken, wie wir dieses Problem lösen können. Wenn auf den geänderten Stil nicht normal zugegriffen werden kann, wie wäre es mit der Änderung des Stildateinamens? Die Antwort ist ja und wird hier nicht überprüft. Allerdings ist es offensichtlich zu mühsam, den Dateinamen jedes Mal manuell zu ändern. Ist es möglich, den Dateinamen nicht zu ändern? Die Antwort ist ja. Möglicherweise fügen wir nach dem Namen der importierten Datei eine Versionsnummer hinzu, die sich von der vorherigen Version unterscheidet (normalerweise das Aktualisierungsdatum). Der Code lautet wie folgt: Code kopieren Der Code lautet wie folgt:<link rel="stylesheet" type="text/css" href="reset.css?v=20140829"> <script type="text/javascript" src="core.js?v=20140829"></script> Sie können sehen, dass auf meinen CSS-Dateinamen und meinen JS-Dateinamen „v=20140829“ folgt. Auf diese Weise kann ich die Dateien zwischenspeichern, ohne den Dateinamen zu ändern, und sie in Echtzeit aktualisieren. „v=20140829“ ist nur eine allgemeine Schreibweise und kann durch andere ersetzt werden. Schließlich gibt es noch Bilder. Bilder mit img-Tags haben im Allgemeinen keine doppelten Namen, da die Dateinamen im Hintergrund generiert werden. Handelt es sich um ein Bild mit einem festen Dateinamen, ist die Vorgehensweise die gleiche wie oben. Was das Hintergrundbild betrifft, wird mit der Änderung des Stilnamens der Bildauflösungspfad natürlich synchron aktualisiert, sodass auch das Hintergrundbild aktualisiert wird. |
<<: Zusammenfassung der häufig verwendeten Datenbank- und Tabellen-Sharding-Lösungen von MySQL
>>: Detaillierte Erklärung der Grundkonzepte von HTML
Artikel empfehlen
Detaillierte Erläuterung der Werteübertragung von Vue-Eltern-Kind-Komponenten und der Probleme beim unidirektionalen Datenfluss
Inhaltsverzeichnis Vorwort 1. Die übergeordnete K...
Detailliertes grafisches Tutorial zur Installation und Deinstallation von Tomcat8 unter Linux
[ Linux-Installation von Tomcat8 ] Tomcat deinsta...
Detaillierte Erklärung der Verwendung von Refs in den drei Hauptattributen von React
Inhaltsverzeichnis Klassenkomponente Funktionale ...
Untersuchung der drei zugrunde liegenden Mechanismen der globalen Statusverwaltung von React
Inhaltsverzeichnis Vorwort Requisiten Kontext Zus...
Detaillierte Erläuterung der Überwachung des Jenkins-Prozesses basierend auf Zabbix
1. Überwachungsarchitekturdiagramm 2. Umsetzungsi...
Vue verwendet E-Charts, um ein Organigramm zu zeichnen
Gestern habe ich einen Blog über den kreisförmige...
Drei Möglichkeiten zum Konfigurieren einer JNDI-Datenquelle in Tomcat
In meiner früheren Arbeit war der Entwicklungsser...
Lösung für Klickereignisfehler bei Verwendung von Better-Scroll bei der Vue-Mobilentwicklung
Vor Kurzem habe ich Vue verwendet, um das Entwick...
Informationen zur Verwendung von Keepalived zum Erreichen eines automatischen Neustarts von Nginx und einer hohen Verfügbarkeit von Dual Active Hot Standby
Inhaltsverzeichnis 1. Übersicht 2. Verwenden Sie ...
Das adaptive CSS-Layout realisiert die Gesamtzentrierung von Unterelementelementen und die Linksausrichtung von internen Elementen
Bei der täglichen Arbeit stoßen wir möglicherweis...
Beispielcode für das Testskript für Indizes und Sperren auf den Isolationsebenen RR und RC
Grundlegende Konzepte Aktueller Lesevorgang und S...
Eine kurze Diskussion über die Unterschiede zwischen den drei wichtigsten Datenbanken: Mysql, SqlServer und Oracle
MySQL Vorteil: Kleine Größe, hohe Geschwindigkeit...
So verwenden Sie pdf.js zur Vorschau von PDF-Dateien in Vue
Wenn wir auf der Seite eine PDF-Vorschau anzeigen...
Vue-Element el-transfer fügt Drag-Funktion hinzu
Das Core Asset Management Project erfordert, dass...
So entfernen Sie MySQL aus Ubuntu und installieren es neu
Löschen Sie zuerst MySQL: sudo apt-get remove mys...