Concepts importants du mécanisme de mise en cache JS : comprendre et vulgariser cinq points de connaissances

Vulgarisation des connaissances : pour comprendre les cinq concepts importants du mécanisme de mise en cache JS, des exemples de code spécifiques sont nécessaires

Dans le développement front-end, le mécanisme de mise en cache JavaScript (JS) est un concept très clé. Comprendre et appliquer correctement les mécanismes de mise en cache peut améliorer considérablement la vitesse de chargement et les performances des pages Web. Cet article présentera cinq concepts importants du mécanisme de mise en cache JS et fournira des exemples de code correspondants.

1. Cache du navigateur

Le cache du navigateur signifie que lorsque vous visitez une page Web pour la première fois, le navigateur enregistre les ressources pertinentes de la page Web (telles que les fichiers JS, les fichiers CSS, les images, etc.) dans le cache local. . Lorsque vous accédez à nouveau à la même page Web, le navigateur charge les ressources du cache au lieu de les retélécharger. Cela réduit les requêtes réseau et augmente la vitesse de chargement des pages.

Exemple de code :

// 设置缓存
localStorage.setItem('name', 'John');

// 读取缓存
let name = localStorage.getItem('name');
console.log(name); // 输出：John

// 清除缓存
localStorage.removeItem('name');

2. Mise en cache HTTP

La mise en cache HTTP fait référence au mécanisme de mise en cache basé sur le protocole HTTP. Lorsqu'un navigateur envoie une requête, le serveur peut indiquer au navigateur s'il doit mettre en cache la ressource en définissant le champ Cache Control dans l'en-tête de réponse. Les champs de contrôle de cache courants incluent Cache-Control和Expires.

Exemple de code :

// 使用协商缓存
let request = new XMLHttpRequest();
request.open('GET', 'https://example.com/api/data', true);
request.setRequestHeader('If-None-Match', 'xyz'); // 设置ETag
request.send();

request.onload = function() {
  if (request.status === 304) {
    // 从缓存中加载资源
    console.log('加载缓存数据');
  } else {
    // 第一次加载数据
    console.log('加载新数据');
  }
};

3. Empreinte digitale de fichier

L'empreinte digitale de fichier fait référence à une chaîne d'identifiants uniques générés par hachage du contenu du fichier, qui est utilisée pour déterminer si le contenu du fichier a changé. Les mises à jour du cache peuvent être réalisées en utilisant l'empreinte digitale du fichier dans le cadre d'un paramètre de requête ou d'un nom de fichier lorsque le navigateur demande le fichier.

Exemple de code :

// 生成文件指纹
const fileContent = 'console.log("Hello, world!")';
const fileHash = md5(fileContent);

// 文件加载时添加文件指纹
const script = document.createElement('script');
script.src = `https://example.com/js/app-${fileHash}.js`;
document.body.appendChild(script);

4. Stratégie de mise en cache

La stratégie de mise en cache fait référence à la détermination de la période de validité et de la stratégie de mise à jour du cache en fonction de la fréquence de mise à jour et de l'importance de la ressource. Les stratégies de mise en cache courantes incluent la mise en cache forte et la mise en cache négociée. La mise en cache renforcée charge les ressources directement à partir du cache, tandis que la mise en cache de négociation interagit avec le serveur pour déterminer si les ressources sont disponibles.

Exemple de code :

// 设置强缓存
res.setHeader('Cache-Control', 'max-age=3600'); // 缓存有效期为1小时
res.setHeader('Expires', new Date(Date.now() + 3600 * 1000).toUTCString());

// 设置协商缓存
res.setHeader('ETag', 'xyz'); // 设置ETag
res.setHeader('Last-Modified', new Date().toUTCString()); // 设置Last-Modified

// 判断缓存是否可用
if (req.headers['if-none-match'] === 'xyz' && req.headers['if-modified-since'] === lastModified) {
  res.writeHead(304); // 缓存可用，返回304
  res.end();
} else {
  res.writeHead(200); // 返回新资源
  res.end(fileContent);
}

5. Mise à jour du cache

Pendant le développement, nous rencontrons souvent le problème selon lequel les ressources statiques sont mises à jour mais les anciennes ressources sont toujours chargées dans le navigateur de l'utilisateur. Afin de résoudre ce problème, vous pouvez utiliser des méthodes de mise à jour du cache, telles que l'ajout de numéros de version, la modification des empreintes digitales des fichiers, etc. En mettant à jour le cache, vous pouvez garantir que les utilisateurs chargent toujours les dernières ressources lorsqu'ils accèdent à la page.

Exemple de code :

// 添加版本号
const script = document.createElement('script');
script.src = `https://example.com/js/app?v=1.0`;
document.body.appendChild(script);

// 修改文件指纹
const fileContent = 'console.log("Hello, world!")';
const fileHash = md5(`${fileContent}${newData}`);
const script = document.createElement('script');
script.src = `https://example.com/js/app-${fileHash}.js`;
document.body.appendChild(script);

Résumé

Comprendre les cinq concepts importants du mécanisme de mise en cache JS peut nous aider à mieux optimiser les performances des pages Web. Grâce à des moyens techniques tels que la mise en cache du navigateur, la mise en cache HTTP, les empreintes digitales des fichiers, les politiques de mise en cache et les mises à jour du cache, nous pouvons améliorer la vitesse de chargement des pages Web, réduire la charge du serveur et améliorer l'expérience utilisateur.

Il convient de noter que différents scénarios et exigences peuvent nécessiter différentes stratégies de mise en cache. Par conséquent, dans le développement réel, nous devons choisir un mécanisme de mise en cache approprié en fonction de la situation spécifique, et effectuer des tests et des optimisations de performances. Ce n'est que par un apprentissage et une pratique continus que nous pourrons maîtriser et utiliser le mécanisme de mise en cache JS pour offrir aux utilisateurs une meilleure expérience Web.

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!