So löschen Sie den Cache von JS- und CSS-Dateien automatisch über die Front-End-Schnittstelle

Während des Entwicklungsprozesses von Webprojekten treten häufig Caching-Probleme auf, nachdem die Dateien aktualisiert wurden (der Code wird offensichtlich geändert, in diesem Fall erfolgt jedoch keine Änderung). Normalerweise verwenden wir die folgenden zwei Lösungen:

1. Leeren Sie den Browser-Cache manuell

2. Fügen Sie die Versionsnummer hinzu (z. B. „layout.css?v=1“)

Meine persönliche Meinung 2 ist schneller, da das Löschen des Browser-Cache immer noch darauf warten muss, dass der Browser antwortet. Da es jedoch mühsam ist, die Versionsnummer jedes Mal zu ändern, müssen Sie eine Möglichkeit finden, die Versionsnummer automatisch hinzuzufügen.

Die folgenden Methoden habe ich gesammelt:

Methode 1: Sie kann die Versionsnummer automatisch über js zu HTML hinzufügen

<script type="text/javascript"> 
document.write("<link rel=&#39;stylesheet&#39; type=&#39;text/css&#39; href=&#39;/css/layout.css?v="+new Date().getTime()+"&#39;>");  
</script>

Methode 2: Wenn es sich um eine JSP-Seite handelt, können Sie Java-Code verwenden, um einen Zeitstempel zu generieren (wenn es sich um eine JSP-Seite handelt, können Sie auch verwenden Methode 1, aber diese Methode ist bequemer)

<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<%=System.currentTimeMillis() %>">

Methode 3: Verwenden Sie andere Methoden, um die Versionsnummer hinzuzufügen, z. B. automatische Konfiguration mit node.js usw.

ps: Der Zweck des Leerens des Caches besteht darin, die Aktualisierung der Seite rechtzeitig zu sehen. Wenn wir die Seite online stellen (d. h. in einer formalen Umgebung bereitstellen, werden keine Änderungen vorgenommen), wird empfohlen, die Versionsnummer zu korrigieren, da die Der Zugriff auf zwischengespeicherte Seiten ist schneller und die feste Versionsnummer kann geändert werden, wenn eine Aktualisierung erforderlich ist.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So lösen Sie die Lücken in Bildern in H5

Welche Aspekte sollten beachtet werden? die Seitenstruktur von HTML5

So verwenden Sie localStorage und sessionStorage

Das obige ist der detaillierte Inhalt vonSo löschen Sie den Cache von JS- und CSS-Dateien automatisch über die Front-End-Schnittstelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!