フロントエンドキャッシュ戦略：ブラウザからCDNまで

効果的なフロントエンドキャッシュ戦略は、レイヤーで実装する必要があります。1。ブラウザキャッシュは、キャッシュコントロールなどのHTTPヘッダーを介して静的リソースのローカルストレージを制御し、ハッシュと不変のファイルに長い最大年齢（1年など）を設定し、HTMLファイルの再確認を確保するためにノーキャッシュを使用します。 2。サービスワーカーは、PWAおよびサードパーティのリソースに適したキャッシュの優先順位、古い更新、ネットワークの優先度ポリシーなどの高度なキャッシュロジックを実装しますが、貯蔵廃棄物を避けるためにキャッシュコンテンツを慎重に選択する必要があります。 3。CDNキャッシュは、キャッシュの妥当性を管理するために必要な場合、正しいキャッシュ制御ヘッダー、バージョンURL、アクティブクリアリングAPIに依存して、グローバルエッジノードを介してコンテンツ分布を加速します。 4.キャッシュ障害が重要な課題です。バージョンされたURLを最も安全な方法として使用することをお勧めします。CDNのタグクリア機能と短いTTLを動的コンテンツの短いTTLと組み合わせて、時間の有効期限のみに依存しないようにします。全体的な戦略には、HTMLの非キャッシュ、静的リソースの長期キャッシュ、API応答条件キャッシュ、およびサービスワーカースレッドがオフラインアクセスをサポートしながら、建設プロセス、展開パイプライン、キャッシュ構成の共同自動化を確保し、最終的には高速で信頼できるユーザーエクスペリエンスを実現します。

フロントエンドのパフォーマンスについて話すとき、キャッシュはアーセナルで最も強力なツールの1つです。適切に設計されたキャッシュ戦略は、特に繰り返し訪問者のために、負荷時間を大幅に短縮し、サーバーの負荷を減らし、ユーザーエクスペリエンスを向上させることができます。しかし、効果的なキャッシュは、ヘッダーを設定して1日と呼ぶことだけではありません。複数のレイヤーにまたがっています。ブラウザからCDNまで。各レベルで重要な戦略を分類しましょう。

1。ブラウザキャッシュ：資産の保存方法をローカルに制御します

ブラウザキャッシュを使用すると、ユーザーは静的資産（CSS、JS、画像など）をローカルに保存できるため、訪問ごとに再ダウンロードする必要はありません。これは、主にHTTPヘッダーを介して制御されます。

キーヘッダー：

• Cache-Control ：最新のキャッシュ動作の主な指令。
  • max-age ：ブラウザは（秒単位）キャッシュバージョンを使用する必要があります。
  • public / private ：応答が共有キャッシュ（例えば、CDN）に保存できるのか、それともユーザーのブラウザでのみ保存できるかを示します。
  • no-cacheまたはno-store ：強制的に再検証するか、キャッシュを完全に防止します（控えめに使用してください）。
• ETagまたはLast-Modified ：条件付きリクエストに使用されます。ファイルが変更されていない場合、サーバーは304（変更されていない）で応答し、帯域幅を保存します。

ベストプラクティス：

• バージョンされた静的資産（例： app.a1b2c3d.js ）には、長いmax-age （例： max-age=31536000 ）を使用します。
• HTMLファイルを直接キャッシュしないでください。 no-cacheを使用して、各訪問でブラウザが再確認されます。
• キャッシュバストテクニックを使用します：ファイル名にハッシュ（WebpackまたはVite経由）を含めるので、更新されたファイルは新しいURLを取得します。

例：
Cache-Control: public, max-age=31536000, immutable
これにより、ブラウザと仲介者が1年間資産をキャッシュし、再評価しないようにします。

2。サービスワーカーキャッシュ：クライアント側の高度なコントロール

サービスワーカーは、ネットワークリクエストを傍受し、HTTPヘッダーができることを超えてカスタムキャッシュロジックを実装できます。

一般的な戦略：

• 最初にキャッシュ、ネットワークフォールバック：静的資産に最適です。利用可能な場合はキャッシュからサーブします。そうでない場合は、ネットワークからフェッチします。
• Stale-while-revalidate ：キャッシュバージョンをすぐに返してから、バックグラウンドで更新します。
• ネットワーク最初に、キャッシュフォールバック：動的コンテンツに役立ちます。最初にネットワークを試し、オフラインの場合はキャッシュに戻ります。

ユースケース：

• オフラインで動作するプログレッシブWebアプリ（PWAS）。
• CDNコントロールの下にないサードパーティの資産（たとえば、フォント、API）をキャッシュします。
• 有効期限と更新に対する細かい制御。

ヒント：すべてをキャッシュしないでください。選択してください - メディアファイルを大きくするか、まれに使用されていないルートは、ストレージを無駄にする可能性があります。

3。CDNキャッシング：グローバルに配達をスピードアップします

コンテンツ配信ネットワーク（CDN）は、世界中に配布されているサーバーでコンテンツをキャッシュします。ユーザーがファイルを要求すると、最寄りのエッジの場所からファイルを取得します。

それがどのように機能するか：

• 最初のユーザーは、 style.css →cdn fite from ostirimsをリクエストし、それをキャッシュし、それを提供します。
• 同じ地域の後続のユーザーは、エッジキャッシュからそれを取得します。

最適化のヒント：

• Origin Serverから適切なCache-Controlヘッダーを設定します。CDNSは、デフォルトでこれらを尊重します。
• バージョンされたURL（Eg、 /v1.2.0/app.js ）を使用して、キャッシュの無効化の問題を回避します。
• 更新を強制する必要がある場合は、CDNパージ/無効化APIを活用します。
• 複数のレベルでのキャッシュ：エッジでの静的資産、短いTTLを備えた動的コンテンツまたはまったくないか。

Advanced：一部のCDNSは、キャッシュキーのカスタマイズ（例えば、特定のクエリパラメーションを無視する）と原点シールドをサポートして、原点負荷を減らします。

4.キャッシュ無効化：最も難しい部分

強固な無効化計画がなければ、キャッシュ戦略は完了しません。キャッシングは簡単です。キャッシュを止めるときは困難です。

戦略：

• バージョンされたURL ：最も安全な方法。コンテンツが変更されたら、ファイル名またはパスを変更します。
• キャッシュタグまたはパージAPI ：いくつかのCDN（例えば、CloudFlare、Quaply）を使用して、特定のタグ（「ホームページ」など）ですべてをパージします。
• 動的コンテンツの短いTTL ：一部のコンテンツは少し古くなるが、頻繁に更新されることを受け入れます。

重要な更新のために、時間ベースの有効期限だけに依存しないでください。バージョン化と組み合わせます。

それをすべてまとめる

堅牢なフロントエンドキャッシュ戦略がこれらのアプローチを層にします。

• HTML ：キャッシュや短いTTLの再検証なし（ ETag経由）。
• ハッシュ付きJS/CSS/画像：長期ブラウザとCDNキャッシング（ max-age=1yr 、 immutable ）。
• API応答： ETagまたは短いTTLを使用した条件付きキャッシュ。
• オフラインサポート：コアアプリシェルと重要な資産のサービスワーカー。

キーはアラインメントです。ビルドプロセス、ヘッダー、CDN構成、および展開パイプラインはすべて一緒に機能する必要があります。 CI/CDでキャッシュバストを自動化し、CDNのキャッシュヒット率を監視します。

キャッシュはすべてのサイズに適合しているわけではありませんが、ブラウザポリシー、サービスワーカー、CDNインテリジェンスの適切な組み合わせにより、高速で信頼できるエクスペリエンスを毎回提供できます。

以上がフロントエンドキャッシュ戦略：ブラウザからCDNまでの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。