パフォーマンスの向上: Web とモバイルに不可欠なキャッシュ戦略-jsチュートリアル-php.cn

パフォーマンスの向上: Web とモバイルに不可欠なキャッシュ戦略

PHPz

リリース： 2024-07-17 06:23:26

オリジナル

1139 人が閲覧しました

導入

キャッシュは、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 ページの状態をブラウザーの履歴に保存し、ユーザーがページ全体をリロードせずに前後に移動できるようにするメカニズムを指します。

ほとんどのブラウザにはこれらが備わっており、検査タブからこれを調べることができます

Inspect Tab of Chrome

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

ページキャッシュ: ブラウザーは、DOM、JavaScript コンテキスト、メモリ内データを含むページの完全な状態を保存します。
BFCache: 最新のブラウザ (Chrome や Firefox など) は BFCache を使用してページの状態をメモリに保存し、瞬時のナビゲーションを可能にします。

B/F キャッシュの利点

ナビゲーションの高速化: ブラウザの戻るボタンと進むボタンを使用すると、瞬時にページが読み込まれます。
ユーザーエクスペリエンスの向上: シームレスな移行により、全体的なユーザーエクスペリエンスが向上します。
サーバー負荷の軽減: ページの状態が保存され再利用されるため、サーバーへのリクエストが少なくなります。

結論

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

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

以上がパフォーマンスの向上: Web とモバイルに不可欠なキャッシュ戦略の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。