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:

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

So blockieren und verbieten Sie Webcrawler im Nginx-Server

HTML implementiert die Funktion zum automatischen Aktualisieren oder Öffnen eines neuen Fensters für den URL-Link des Elements href

Artikel

Webseite WB.ExecWB - Beschreibung des Aufrufs der Druckmethode und Einführung in die Parameter

Eine einfache Möglichkeit, den CSS-, JavaScript- und Hintergrundbild-Cache im Browser zu leeren

So blockieren und verbieten Sie Webcrawler im Nginx-Server

So betreiben Sie eine MySql-Datenbank mit Gorm

So verhindern Sie, dass Benutzer Webseiteninhalte mit reinem CSS kopieren

Die perfekte Lösung für die verstümmelten chinesischen Zeichen in mysql6.x unter Win7

Vue implementiert rekursiv benutzerdefinierte Baumkomponenten

HTML implementiert die Funktion zum automatischen Aktualisieren oder Öffnen eines neuen Fensters für den URL-Link des Elements href

Webseite WB.ExecWB - Beschreibung des Aufrufs der Druckmethode und Einführung in die Parameter

Verwenden Sie Schaltflächenauslöserereignisse, um einen blinkenden Hintergrundfarbeffekt zu erzielen

MySQL 4-Methoden zum Importieren von Daten

Detaillierte Erläuterung der Vue-Formularbindung und -Komponenten

Artikel empfehlen

Neue Verwendung von watch und watchEffect in Vue 3

Tutorial zur Installation der Dekomprimierungsversion von MySQL 8.0.12

Implementierung des CSS-Animationseffekts für dynamische Höhenübergänge

Eine kurze Diskussion über Tags in HTML

Deaktivieren der Implementierungseigenschaften für Eingabetextfelder

So stellen Sie ein SpringBoot-Projekt mit Dockerfile bereit

Reacts Methode zur Realisierung einer sekundären Verknüpfung

Verwenden Sie Vue3, um eine Komponente zu implementieren, die mit js aufgerufen werden kann

So erstellen Sie eine TAR-Datei von WSL über Docker

Seitenlayout für Bootstrap 3.0-Lernnotizen

Linux Cron geplante Ausführung von PHP-Code mit Parametern

Eine kurze Diskussion über den Spaß von :focus-within in CSS

Web 2.0: Ursachen und Lösungen der Informationsüberflutung

Detaillierte Analyse von Javascript-Datenproxys und Ereignissen

Fehler beim reduzierten Tabellenzeilenelement