JS キャッシュ メカニズムの 5 つの謎を解明する

明らかになった: JS キャッシュ メカニズムの 5 つの謎、具体的なコード例が必要です

はじめに:
フロントエンド Web アプリケーションを開発するとき、データの問題に遭遇することがよくあります。読み込みが遅い、フリーズするなど。ユーザー エクスペリエンスを最適化し、Web ページの読み込みパフォーマンスを向上させるために、JavaScript のキャッシュ メカニズムを使用できます。この記事では、JS キャッシュ メカニズムの 5 つの謎を明らかにし、開発者がそれらをよりよく理解して適用できるようにする具体的なコード例を示します。

1. HTTP キャッシュ メカニズム
HTTP キャッシュは、Web 開発で最も一般的に使用されるキャッシュ メカニズムの 1 つです。ブラウザのキャッシュを使用して、画像、スタイル シート、スクリプト ファイルなどの静的リソースを Web ページに保存します。ブラウザが同じリソースを再度リクエストすると、サーバーから直接ダウンロードするのではなく、最初にキャッシュからそのリソースを読み取ります。

HTTP キャッシュを実装するために、サーバーは応答ヘッダーに Cache-Control や Expires などのフィールドを設定します。具体的なコード例は次のとおりです。

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

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

2. LocalStorage キャッシュ
localStorage は、HTML5 によって提供されるクライアント側のストレージ ソリューションであり、キーと値のペアのデータをブラウザーにローカルに保存できます。 localStorage を使用してデータをキャッシュすると、ネットワーク要求が削減され、アプリケーションの応答速度が向上します。

次は、localStorage キャッシュを使用するサンプル コードです:

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

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

3. sessionStorage キャッシュ
sessionStorage も、HTML5 によって提供されるクライアント ストレージ ソリューションです。localStorage に似ていますが、保存されます。データは現在のセッション中のみ有効です。ブラウザ ウィンドウを閉じると、sessionStorage 内のデータはクリアされます。

次は sessionStorage キャッシュのコード例です:

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

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

4. Service Worker キャッシュ
Service Worker は、Web ページから独立したブラウザによって提供される JavaScript スクリプト実行環境です。また、ネットワーク要求をインターセプトし、応答をキャッシュすることができます。 Service Worker キャッシュを使用すると、オフライン ブラウジング機能を実装し、より良いユーザー エクスペリエンスを提供できます。

次は、Service Worker を使用して静的リソースをキャッシュするコード例です:

// 注册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. メモ化 (メモリ)
メモ化とは、関数の計算結果をキャッシュする最適化技術です。性能を上げる。同一入力、同一出力の関数に適しており、関数の結果をキャッシュすることで繰り返しの計算を避け、関数の実行効率を向上させることができます。

以下はメモ化を使用したサンプルコードです:

// 缓存函数的计算结果
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);
});

結論:
以上が JS キャッシュ機構の 5 つの謎と具体的なコード例です。キャッシュ メカニズムを合理的に利用することで、Web ページの読み込みパフォーマンスとユーザー エクスペリエンスを大幅に向上させることができます。この記事が、開発者がキャッシュ テクノロジをよりよく理解して適用し、フロントエンド開発作業を最適化するのに役立つことを願っています。

以上がJS キャッシュ メカニズムの 5 つの謎を解明するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。