Lassen Sie uns über das Wissen über HTML-Caching sprechen

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

1. Serverseitige Einstellungen

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:

• Cache-Control: Wird zur Steuerung des Cache-Verhaltens verwendet. Zu den allgemeinen Werten gehören Max-Age, No-Cache, No-Store usw. Unter diesen gibt max-age die maximale Zeit (Sekunden) an, die die Ressource zwischengespeichert werden kann, no-cache gibt an, dass der Client gezwungen ist, die Gültigkeit der zwischengespeicherten Daten zu überprüfen, bevor er zwischengespeicherte Ressourcen verwendet, und no-store gibt an, dass der Browser Es ist verboten, Daten zwischenzuspeichern.
• Expires: Cache-Ablaufzeit, die verwendet wird, um dem Browser mitzuteilen, wann er erneut Ressourcen anfordern muss.
• Zuletzt geändert: Der Zeitpunkt der letzten Änderung der Ressource, der dem Browser hilft, die Gültigkeit der zwischengespeicherten Daten zu überprüfen.
• ETag: Die eindeutige Kennung der Ressource, die dem Browser auch dabei hilft, die Gültigkeit der zwischengespeicherten Daten zu überprüfen.

2. Client-Einstellungen

Auf dem Client können Sie den HTML-Cache auf folgende Weise festlegen:

• HTML-Meta-Tag: Fügen Sie der HTML-Datei ein Meta-Tag hinzu, um die Cache-Strategie der Seite anzugeben. Häufig verwendete Meta-Tags sind wie folgt:

<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.

• JavaScript: Ändern Sie die Caching-Richtlinie des Browsers über JavaScript-Code. Zum Beispiel:

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

1. Trennung von statischen Ressourcen und dynamischen Ressourcen

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.

2. Unique Resource Locator (URL)-Design

URL-Design wirkt sich auch auf die Wirksamkeit des Cachings aus. Daher kann die URL folgendermaßen gestaltet werden:

• Verzeichnisse nach Ressourcentypen aufteilen: Verwenden Sie beispielsweise „/css/“, „/js/“, „/img/“ usw., um Verzeichnisse zu unterteilen.
• Vermeiden Sie die Verwendung dynamischer Parameter in der URL: Beispielsweise kann „/index.php?name=xxx“ in „/user/xxx.html“ geändert werden.

3. Cache-Gültigkeitsüberprüfung

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!