導入

キャッシュは、Web アプリケーションとモバイル アプリケーションの速度と応答性を向上させる革新的なものです。このブログでは、フロントエンド アプリケーションに不可欠なキャッシュ戦略を検討し、大規模なデータの処理に取り組み、バックワード/フォワード (B/F) キャッシュの複雑さを掘り下げます。

フロントエンド アプリケーションの主要なキャッシュ戦略

ブラウザのキャッシュ

ブラウザ キャッシュは、Web アセットのコピーをローカルに保存するブラウザの機能を活用し、読み込み時間とサーバー リクエストを削減します。ここではいくつかの重要な側面を示します:

• Cache-Control: この HTTP ヘッダーはキャッシュ ポリシーを指定します。たとえば、Cache-Control: max-age=3600 は、リソースを 3600 秒間キャッシュするようにブラウザに指示します。

• Expires: このヘッダーは、キャッシュされたリソースの正確な有効期限日時を指定します。これは、Cache-Control.

と一緒によく使用されます。

• ETag: ETag ヘッダーは、リソース バージョンの一意の識別子を提供します。リソースが変更されると、その ETag が変更され、効率的なキャッシュ検証が可能になります。
  

Cache-Control: public, max-age=86400
Expires: Wed, 21 Oct 2024 07:28:00 GMT
ETag: "33a64df5"

サービスワーカー

Service Worker はバックグラウンドで実行されるスクリプトであり、高度なキャッシュ機能を提供します。ネットワーク リクエストをインターセプトし、キャッシュされた応答を提供し、オフライン アクセスも許可します。

• キャッシュファースト: 利用可能な場合はキャッシュから提供します。そうでない場合は、ネットワークから取得します。

• ネットワークファースト: 最初にネットワークからフェッチします。ネットワークが利用できない場合は、キャッシュから配信します。

• Stale-while-Revalidate: キャッシュから提供し、同時にバックグラウンドでキャッシュを取得して更新します。
  

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

ローカルストレージとIndexedDB

ローカル ストレージと IndexedDB は、クライアント側でデータを永続化するためのブラウザベースのストレージ ソリューションです。

• ローカル ストレージ: 少量のデータをキーと値のペアとして保存するのに最適です。これは同期であり、約 5MB のストレージ制限があります。

• IndexedDB: 大量の構造化データの保存に適しています。トランザクションと複雑なクエリをサポートしているため、より大量で複雑なデータに最適です。

例

ローカルストレージ

localStorage.setItem('key', 'value');
let value = localStorage.getItem('key');

インデックス付きDB

let request = indexedDB.open('database', 1);
request.onupgradeneeded = event => {
  let db = event.target.result;
  db.createObjectStore('store', { keyPath: 'id' });
};

ブラウザ自体にはいくつかのキャッシュ技術があります。ここではそのうちの 1 つを紹介します。

バックワード/フォワード (B/F) キャッシュの詳細

B/F キャッシュとは何ですか?

B/F キャッシュとは、ブラウザが Web ページの状態をブラウザの履歴に保存するメカニズムを指し、これによりユーザーはページ全体をリロードしなくても前後に移動できるようになります。

ほとんどのブラウザにはこれらの機能があり、検査タブから調べることができます

B/F キャッシュの仕組み

• ページ キャッシュ: ブラウザーは、DOM、JavaScript コンテキスト、メモリ内データを含むページの完全な状態を保存します。

• BFCache: 最新のブラウザ (Chrome や Firefox など) は BFCache を使用してページの状態をメモリに保存し、瞬時のナビゲーションを可能にします。

B/F キャッシュの利点

• ナビゲーションの高速化: ブラウザの戻るボタンと進むボタンを使用すると、瞬時にページが読み込まれます。

• ユーザー エクスペリエンスの向上: シームレスな移行により、全体的なユーザー エクスペリエンスが向上します。

• サーバー負荷の軽減: ページの状態が保存され再利用されるため、サーバーへのリクエストが少なくなります。

結論

効率的なキャッシュ戦略を実装すると、Web アプリケーションとモバイル アプリケーションのパフォーマンスを大幅に向上させることができます。ブラウザー キャッシュやサービス ワーカーから大規模データへの取り組みや B/F キャッシュの利用に至るまで、これらの技術により、アプリの高速性、応答性、ユーザー フレンドリー性が保証されます。今すぐこれらの戦略を活用して、アプリのパフォーマンスに革命を起こしましょう!

このブログから何か新しいことを学んでいただければ幸いです。短く、鮮明で、奥深い、ユニークな技術ブログをご覧になるには、私をフォローしてください。ありがとう！