Mit der Zunahme der Website-Besuche ist das schnelle Laden von Webseiten zu einem wichtigen Aspekt der Benutzererfahrung geworden. Die HTML-Caching-Technologie ist eines der effektivsten Mittel zur Lösung dieses Problems. In diesem Artikel werden das Konzept, die Einstellungsmethoden und Optimierungstechniken des HTML-Cachings vorgestellt.
1. Das Konzept des HTML-Cachings
HTML-Caching, also Browser-Caching, bezieht sich auf das Zwischenspeichern von Seitenressourcen (wie HTML, CSS, JS und anderen Dateien) im Browser, damit diese aus dem lokalen Cache zwischengespeichert werden können Beim nächsten Besuch lesen Sie, anstatt eine Netzwerkanfrage durchzugehen. Dadurch kann die Anzahl der Ressourcenanforderungen effektiv reduziert, das Laden von Seiten beschleunigt und die Benutzererfahrung verbessert werden.
2. So richten Sie den HTML-Cache ein
Auf der Serverseite können Sie steuern, ob der Browser Seitenressourcen zwischenspeichert, indem Sie den HTTP-Antwortheader festlegen. Häufig verwendete HTTP-Antwortheader sind wie folgt:
Auf dem Client können Sie den HTML-Cache auf folgende Weise festlegen:
<meta http-equiv="Cache-Control" content="max-age=3600, must-revalidate"> <meta http-equiv="Expires" content="Sat, 1 Jan 2022 00:00:00 GMT">
Unter ihnen ist die Verwendung von Cache-Control und Expires die gleiche wie die serverseitigen Einstellungen.
if( window.localStorage ){ // 支持本地存储 if( !localStorage.getItem('firstLoadTime') ){ // 判断是否第一次访问 localStorage['firstLoadTime'] = (new Date()).getTime(); }else if( (new Date()).getTime() - localStorage['firstLoadTime'] > 1000 * 60 * 60 * 24 * 7 ){ // 缓存一周 localStorage.clear(); localStorage['firstLoadTime'] = (new Date()).getTime(); } }
Dieser Code legt die Cache-Zeit der Seite auf eine Woche fest.
3. Optimierungsfähigkeiten für HTML-Cache
Die Trennung statischer Ressourcen (CSS, JS, Bilder usw.) von dynamischen Ressourcen (HTML, PHP, ASP usw.) ist eine Gemeinsamer Optimierungsweg. Zu diesem Zeitpunkt können Sie eine längere Cache-Zeit für statische Ressourcen festlegen, um die Anzahl der Anforderungen und den Bandbreitenverbrauch zu reduzieren.
URL-Design wirkt sich auch auf die Wirksamkeit des Cachings aus. Daher kann die URL folgendermaßen gestaltet werden:
Die Cache-Gültigkeitsüberprüfung kann durch die auf der Serverseite festgelegten Last-Modified- und ETag-Einstellungen erreicht werden. Wenn der Browser-Cache abläuft, können Sie eine Anfrage an den Server senden, um zu prüfen, ob die zwischengespeicherte Ressource noch gültig ist. Wenn es gültig ist, kann die zwischengespeicherte Ressource direkt von der lokalen Ressource gelesen werden, andernfalls muss die Ressource erneut angefordert werden.
4. Zusammenfassung
HTML-Caching-Technologie ist eine effektive Optimierungsmethode, die das Laden von Seiten beschleunigen und die Benutzererfahrung verbessern kann. Bei der tatsächlichen Verwendung müssen Sie serverseitige und clientseitige Einstellungen flexibel verwenden und auf die Überprüfung der Cache-Gültigkeit und das URL-Design achten.
Das obige ist der detaillierte Inhalt vonLassen Sie uns über das Wissen über HTML-Caching sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!