Résumé de cinq points clés du mécanisme de mise en cache JS

Révision des connaissances : cinq points clés dans le mécanisme de mise en cache JS, des exemples de code spécifiques sont requis

Introduction : Dans le développement front-end, la mise en cache est un élément important de l'amélioration des performances des pages Web. Le mécanisme de mise en cache JavaScript fait référence à la sauvegarde locale des ressources acquises afin que le cache puisse être directement utilisé lors des accès ultérieurs, réduisant ainsi le temps de chargement des ressources et la consommation de bande passante du réseau. Cet article présentera les points clés du mécanisme de mise en cache JS et fournira des exemples de code spécifiques.

1. Type de cache

1. Cache fort

Le cache fort fait référence au mécanisme de mise en cache implémenté en définissant le champ Expires ou Cache-Control dans l'en-tête de réponse HTTP. Lorsque le navigateur demande une ressource, il vérifiera d'abord si la ressource existe dans un cache local. Si elle existe et est toujours dans la période de validité, le cache sera utilisé directement sans envoyer de requête.

Exemple de code :

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

2. Mise en cache négociée

La mise en cache négociée est un mécanisme de mise en cache qui communique avec le serveur en définissant le champ If-Modified-Since ou If-None-Match dans l'en-tête de la requête HTTP. Lorsque le navigateur demande une ressource, il envoie d'abord la demande au serveur. Le serveur compare les champs de l'en-tête de la demande avec l'heure de la dernière modification de la ressource. Si la ressource n'a pas changé, il renvoie le code d'état 304 Non modifié et. indique au navigateur d'utiliser le cache local.

Exemple de code :

// 获取请求头中的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. Emplacement du cache

1. Cache du navigateur

Le cache du navigateur fait référence aux fichiers de cache mis en cache localement dans le navigateur. Lorsque le navigateur accède à la même ressource, il vérifiera d'abord s'il existe un fichier cache pour la ressource. S'il existe, le cache sera utilisé directement. Sinon, une requête réseau sera envoyée.

Exemple de code :

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

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

2. Cache du serveur

Le cache du serveur fait référence aux fichiers de cache mis en cache côté serveur. Lorsque le navigateur demande une ressource, le serveur vérifie si un fichier cache existe pour la ressource et, si tel est le cas, renvoie directement le fichier cache.

Exemple de code :

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

3. Contrôle du temps de cache

1. Durée du cache

La durée du cache fait référence à la période de validité du cache fort ou du cache négocié, et différentes durées de cache peuvent être définies en fonction des besoins.

Exemple de code :

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

2. Stratégie de cache

La stratégie de cache fait référence à la définition de différentes stratégies de cache en fonction du type de ressource ou du chemin de ressource. Différentes stratégies de mise en cache peuvent être mises en œuvre à l'aide d'expressions régulières ou de correspondance de chaînes.

Exemple de code :

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

4. Mise à jour du cache

1. Contrôle de version

Le contrôle de version signifie ajouter un numéro de version lors de la demande de ressources et mettre à jour le numéro de version lorsque la ressource change. Vous pouvez forcer le navigateur à recharger la ressource en mettant à jour le numéro de version.

Exemple de code :

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

2. Forcer l'actualisation

L'actualisation forcée fait référence au fait d'indiquer au navigateur de mettre à jour le cache immédiatement en définissant l'âge maximum du champ Cache-Control sur 0.

Exemple de code :

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

5. Vidage du cache

La suppression du cache fait référence à la suppression manuelle des fichiers de cache locaux du navigateur ou des fichiers de cache côté serveur.

Exemple de code :

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

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

Résumé : Pour les mécanismes de mise en cache JS courants dans le développement front-end, nous avons introduit cinq points clés, notamment le type de cache, l'emplacement du cache, le contrôle du temps de cache, la mise à jour du cache et la suppression du cache. La maîtrise de ces points clés peut nous aider à mieux comprendre et appliquer le mécanisme de mise en cache, à améliorer les performances des pages Web et à améliorer l'expérience utilisateur. J'espère que l'introduction de cet article pourra être utile à tous les lecteurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!