Zusammenfassung der fünf wichtigsten Punkte des JS-Caching-Mechanismus

Wissensüberprüfung: Fünf Schlüsselpunkte im JS-Caching-Mechanismus, spezifische Codebeispiele sind erforderlich

Einführung: In der Front-End-Entwicklung ist Caching ein wichtiger Bestandteil zur Verbesserung der Webseitenleistung. Der JavaScript-Caching-Mechanismus bezieht sich auf das lokale Speichern erworbener Ressourcen, sodass der Cache bei nachfolgenden Zugriffen direkt verwendet werden kann, wodurch die Ladezeit der Ressourcen und der Netzwerkbandbreitenverbrauch reduziert werden. In diesem Artikel werden die wichtigsten Punkte des JS-Caching-Mechanismus vorgestellt und spezifische Codebeispiele bereitgestellt.

1. Cache-Typ

1. Starker Cache

Starker Cache bezieht sich auf den Caching-Mechanismus, der durch Festlegen des Felds „Abgelaufen“ oder „Cache-Control“ im HTTP-Antwortheader implementiert wird. Wenn der Browser eine Ressource anfordert, prüft er zunächst, ob die Ressource in einem lokalen Cache vorhanden ist und sich noch innerhalb des Gültigkeitszeitraums befindet, wird der Cache direkt verwendet, ohne dass eine Anfrage gesendet wird.

Beispielcode:

// 设置缓存时间为1个小时
res.setHeader('Cache-Control', 'max-age=3600');

2. Negotiated Caching

Negotiated Caching ist ein Caching-Mechanismus, der mit dem Server kommuniziert, indem er das Feld „If-Modified-Since“ oder „If-None-Match“ im HTTP-Anforderungsheader festlegt. Wenn der Browser eine Ressource anfordert, sendet er die Anforderung zunächst an den Server. Der Server vergleicht die Felder im Anforderungsheader mit dem Zeitpunkt der letzten Änderung der Ressource und gibt den Statuscode 304 „Nicht geändert“ zurück Benachrichtigt den Browser, den lokalen Cache zu verwenden.

Beispielcode:

// 获取请求头中的If-Modified-Since字段
const ifModifiedSince = req.headers['if-modified-since'];

// 获取资源的最后修改时间
const lastModified = fs.statSync(filepath).mtime.toUTCString();

// 比较请求头中的字段与最后修改时间
if (ifModifiedSince === lastModified) {
  res.statusCode = 304; // Not Modified
  res.end();
} else {
  res.setHeader('Last-Modified', lastModified);
  // 返回资源
  res.end(file);
}

2. Cache-Speicherort

1. Browser-Cache

Browser-Cache bezieht sich auf Cache-Dateien, die lokal im Browser zwischengespeichert werden. Wenn der Browser auf dieselbe Ressource zugreift, prüft er zunächst, ob eine Cache-Datei für die Ressource vorhanden ist. Andernfalls wird eine Netzwerkanforderung gesendet.

Beispielcode:

// 读取缓存
const cache = localStorage.getItem('cache');

// 判断缓存是否存在
if (cache) {
  // 使用缓存
} else {
  // 发送网络请求
}

2. Server-Cache

Server-Cache bezieht sich auf Cache-Dateien, die auf der Serverseite zwischengespeichert werden. Wenn der Browser eine Ressource anfordert, prüft der Server, ob eine Cache-Datei für die Ressource vorhanden ist, und gibt die Cache-Datei in diesem Fall direkt zurück.

Beispielcode:

// 判断文件是否存在
if (fs.existsSync(filepath)) {
  // 返回缓存文件
} else {
  // 发送网络请求
}

3. Cache-Zeitsteuerung

1. Cache-Zeit

Die Cache-Zeit bezieht sich auf die Gültigkeitsdauer von starkem Cache oder ausgehandeltem Cache. Je nach Bedarf können unterschiedliche Cache-Zeiten festgelegt werden.

Beispielcode:

// 设置缓存时间为1个小时
res.setHeader('Cache-Control', 'max-age=3600');

2. Cache-Strategie

Cache-Strategie bezieht sich auf das Festlegen verschiedener Cache-Strategien basierend auf Ressourcentyp oder Ressourcenpfad. Mithilfe regulärer Ausdrücke oder String-Matching können verschiedene Caching-Strategien implementiert werden.

Beispielcode:

// 设置图片资源的缓存时间为1个月
if (req.url.match(/.jpg|.png|.gif$/)) {
  res.setHeader('Cache-Control', 'max-age=2592000');
}

4. Cache-Aktualisierung

1. Versionskontrolle

Unter Versionskontrolle versteht man das Hinzufügen einer Versionsnummer beim Anfordern von Ressourcen und das Aktualisieren der Versionsnummer, wenn sich die Ressource ändert. Sie können den Browser zwingen, die Ressource neu zu laden, indem Sie die Versionsnummer aktualisieren.

Beispielcode:

<!-- 添加版本号 -->
<link rel="stylesheet" href="styles.css?v=1.0">
<script src="script.js?v=1.0"></script>

2. Aktualisierung erzwingen

Aktualisierung erzwingen bezieht sich darauf, den Browser anzuweisen, den Cache sofort zu aktualisieren, indem das maximale Alter des Cache-Control-Felds auf 0 gesetzt wird.

Beispielcode:

// 强制刷新缓存
res.setHeader('Cache-Control', 'max-age=0');

5. Cache-Löschen

Cache-Löschen bezieht sich auf das manuelle Löschen der lokalen Cache-Dateien des Browsers oder der serverseitigen Cache-Dateien.

Beispielcode:

// 清除浏览器缓存
localStorage.removeItem('cache');

// 清除服务器缓存
fs.unlinkSync(filepath);

Zusammenfassung: Für gängige JS-Caching-Mechanismen in der Front-End-Entwicklung haben wir fünf Schlüsselpunkte eingeführt, darunter Cache-Typ, Cache-Speicherort, Cache-Zeitsteuerung, Cache-Aktualisierung und Cache-Löschen. Die Beherrschung dieser Schlüsselpunkte kann uns helfen, den Caching-Mechanismus besser zu verstehen und anzuwenden, die Leistung von Webseiten zu verbessern und die Benutzererfahrung zu verbessern. Ich hoffe, dass die Einleitung dieses Artikels für alle Leser hilfreich sein kann.

Das obige ist der detaillierte Inhalt vonZusammenfassung der fünf wichtigsten Punkte des JS-Caching-Mechanismus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!