Zenn
Open7

フロントエンドのキャッシュ周りの話

taizo-taizo-

とりあえず既に知っていることでも、網羅的にメモしていく

taizo-taizo-

キャッシュは何のためにあるの？

パフォーマンスの向上

  • 言わずもがな、キャッシュを使用するとサーバーからリソースを再取得する必要がなくなる
  • 結果、ページの読み込み速度が向上する（= UX向上につながる）

サーバー負荷の軽減

  • キャッシュを利用することで、サーバーからのレスポンスを再利用することができ、サーバーはリクエストを処理する必要がない（DBに問い合わせる必要がない）
  • 結果、サーバーの負荷が軽減される

帯域幅の節約

  • キャッシュを使用することで、サーバーに問い合わせすることが発生しない。なので、ネットワーク帯域幅の使用量を減らすことができる
  • データ転送コスト削減やネットワークの混雑を防ぐことができる

オフラインアクセスの提供

  • キャッシュを使用することで、ユーザーがオフラインの状態でもアプリケーションを利用できるようにすることができる。
  • 結果、UXにつながる

レスポンスの一貫性

  • キャッシュを使用することで、同じリソースに対するリクエストに対して一貫したレスポンスを提供することができる
  • 結果、ユーザーが期待するコンテンツを確実に提供できる
taizo-taizo-

キャッシュの種類は？

大きく分けて以下の2つある。

  • プライベートキャッシュ
  • 共有キャッシュ
taizo-taizo-

プライベートキャッシュ(ローカルキャッシュ)とは？

  • クライアント内に存在するキャッシュのこと
  • ローカルキャッシュ、ブラウザキャッシュなどと呼ばれる
  • ユーザーごとにパーソナライズされたコンテンツを保存し、再利用する

プライベートキャッシュの内訳

ユーザーから近い順に記載する

メモリキャッシュ

  • アプリケーションの実行中にデータを一時的に保存するためのキャッシュ。
  • アクセス速度が非常に速い。
  • 例: プログラムの変数やオブジェクト、計算結果の一時保存。

サービスワーカーキャッシュ

サービスワーカーは、基本的にウェブアプリケーション、ブラウザー、そして（もし繋がっていれば）ネットワークの間に介在するプロキシサーバーのように振る舞います。これは、よりよいオフラインの操作性を可能にするように意図されており、ネットワークのリクエストに介在してネットワークの使用可否の状況に基づいて適切な対応を取ったり、サーバー上にある資産を更新したりします。また、プッシュ通知やバックグラウンド同期の API 群へのアクセスもできるようになります。

ブラウザキャッシュ

  • ウェブブラウザがウェブページのリソース（画像、スクリプト、スタイルシートなど）をローカルに保存し、再読み込み時の負荷を軽減する。
  • HDDやSSDといったストレージに書き込まれる。そのため、メモリキャッシュと比較すると、コンテンツ読み書きに時間がかかる。RAMは使用していない。
  • 振る舞いや有効期限はHTTPヘッダーを用いて操作する
taizo-taizo-

共有キャッシュ(リモートキャッシュ)とは？

  • オリジンサーバーとクライアントの間に存在するキャッシュのこと
  • ネットワークを介してアクセスされる
  • Proxy, CDNなどが該当し、リモートキャッシュとも呼ばれる
  • 1つのレスポンスを保存して、それを複数のユーザーで再利用する

ref.
https://www.gomomento.com/jp/resources/blog-jp/3-crucial-caching-choices-where-when-and-how/

共有キャッシュの内訳

CDN

  • 地理的に分散したサーバーを利用して、ユーザーに近い場所からコンテンツを提供し、遅延を最小限に抑える。
  • 例: ウェブサイトの静的コンテンツ（画像、ビデオ、CSS、JavaScript）の配信。

データベースキャッシュ

  • データベースへのクエリ結果をキャッシュし、同じクエリの再実行時にデータベースへの負荷を軽減する。
  • 例: RedisやMemcachedを使用したクエリ結果のキャッシュ。

プロキシキャッシュ

  • クライアントとサーバーの間に配置され、リクエストやレスポンスをキャッシュすることでネットワーク帯域の使用量を削減する。
  • 例: HTTPプロキシサーバーによるウェブコンテンツのキャッシュ。
taizo-taizo-

CDNとプロキシキャッシュは併用することはある？

  • Yes

  • 具体的なユースケースとしてはエンタープライズ環境や教育機関は併用しているケースがある。

  • 例. 教育機関

    • プロキシサーバー: 学生や教職員がアクセスする教材やリソース
    • CDN: 外部からのアクセス
taizo-taizo-

Webページを初期表示したときのコンテンツ格納先はディスクキャッシュ、それ以降はメモリキャッシュ。

メモリキャッシュを保持している状態で、ブラウザをスーパーリロードしたら、ディスクキャッシュが取得される？