Découvrez cinq mystères du mécanisme de mise en cache JS

Révélé : cinq mystères du mécanisme de mise en cache JS, des exemples de code spécifiques sont nécessaires

Introduction :
Lors du développement d'applications Web frontales, nous rencontrons souvent des problèmes tels qu'un chargement lent des données et un décalage. Afin d'optimiser l'expérience utilisateur et d'améliorer les performances de chargement des pages Web, nous pouvons utiliser le mécanisme de mise en cache de JavaScript. Cet article révélera les cinq mystères du mécanisme de mise en cache JS, ainsi que des exemples de code spécifiques pour aider les développeurs à mieux les comprendre et les appliquer.

1. Mécanisme de mise en cache HTTP
La mise en cache HTTP est l'un des mécanismes de mise en cache les plus couramment utilisés dans le développement Web. Il utilise le cache du navigateur pour stocker des ressources statiques dans des pages Web, telles que des images, des feuilles de style et des fichiers de script. Lorsque le navigateur demande à nouveau la même ressource, il la lit depuis le cache au lieu de la télécharger directement depuis le serveur.

Afin d'implémenter la mise en cache HTTP, le serveur définira des champs tels que Cache-Control et Expires dans l'en-tête de réponse. Des exemples de codes spécifiques sont les suivants :

// Cache-Control设置缓存策略为public，表示所有用户（包括代理服务器）都可以缓存该资源
response.setHeader('Cache-Control', 'public');

// 设置缓存过期时间为1小时（以秒为单位）
response.setHeader('Expires', new Date(Date.now() + 3600000).toUTCString());

2. Cache LocalStorage
localStorage est une solution de stockage côté client fournie par HTML5, qui peut enregistrer les données des paires clé-valeur localement dans le navigateur. L'utilisation de localStorage pour mettre en cache les données peut réduire les requêtes réseau et améliorer la vitesse de réponse des applications.

Ce qui suit est un exemple de code utilisant le cache localStorage :

// 将数据保存到localStorage中
localStorage.setItem('data', JSON.stringify(data));

// 从localStorage中读取数据
const cachedData = JSON.parse(localStorage.getItem('data'));

3. Le cache SessionStorage
sessionStorage est également une solution de stockage côté client fournie par HTML5. Elle est similaire à localStorage, mais les données qu'il enregistre ne sont valides que pendant la période actuelle. session. Lorsque la fenêtre du navigateur est fermée, les données de sessionStorage seront effacées.

Ce qui suit est un exemple de code pour la mise en cache de sessionStorage :

// 将数据保存到sessionStorage中
sessionStorage.setItem('data', JSON.stringify(data));

// 从sessionStorage中读取数据
const cachedData = JSON.parse(sessionStorage.getItem('data'));

4. Mise en cache de Service Worker
Service Worker est un environnement d'exécution de script JavaScript fourni par le navigateur qui est indépendant de la page Web et peut intercepter les requêtes réseau et mettre en cache les réponses. Grâce à la mise en cache Service Worker, nous pouvons implémenter une fonctionnalité de navigation hors ligne et offrir une meilleure expérience utilisateur.

Ce qui suit est un exemple de code qui utilise Service Worker pour mettre en cache des ressources statiques :

// 注册Service Worker
navigator.serviceWorker.register('sw.js').then(registration => {
  console.log('Service Worker 注册成功！');
}).catch(error => {
  console.error('Service Worker 注册失败：', error);
});

// 缓存静态资源
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/style.css',
        '/script.js',
        '/image.png'
      ]);
    })
  );
});

// 从缓存中读取资源
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

5. Mémoisation
La mémoisation est une technologie d'optimisation qui améliore les performances en mettant en cache les résultats de calcul des fonctions. Il convient aux fonctions avec la même entrée et la même sortie. En mettant en cache les résultats de la fonction, les calculs répétés peuvent être évités et l'efficacité d'exécution de la fonction peut être améliorée.

Ce qui suit est un exemple de code utilisant la mémorisation :

// 缓存函数的计算结果
const memoize = fn => {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
};

// 计算斐波那契数列
const fibonacci = memoize(n => {
  if (n <= 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
});

Conclusion :
Ce qui précède présente les cinq mystères du mécanisme de mise en cache JS et des exemples de code spécifiques. En utilisant rationnellement le mécanisme de mise en cache, nous pouvons considérablement améliorer les performances de chargement et l'expérience utilisateur des pages Web. J'espère que cet article pourra aider les développeurs à mieux comprendre et appliquer la technologie de mise en cache et à optimiser le travail de développement front-end.

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!