Upgrade to Pro — share decks privately, control downloads, hide ads and more …

知っててうれしい HTTP キャッシュについて

Avatar for greendrop greendrop
December 12, 2024

知っててうれしい HTTP キャッシュについて

Avatar for greendrop

greendrop

December 12, 2024
Tweet

More Decks by greendrop

Other Decks in Technology

Transcript

  1. ヒューリスティックキャッシュ HTTP/1.1 200 OK Content-Type: text/html Date: Tue, 10 Dec

    2024 00:00:00 GMT Last-Modified: Sun, 10 Dec 2023 00:00:00 GMT Date( レスポンス日時) と Last-Modified( リソース変更日時) の差分を 10 分の 1 にして、それがキャッシュ期限となります。 (2024/12/10 - 2023/12/10) / 10 = 0.1 年 2024/12/10 + 0.1 年までがキャッシュ期限 ヒューリスティックキャッシュ 5
  2. Expires または Cache-Control max-age レスポンスヘッダーの Expires または Cache-Control max-age にキャ

    ッシュの有効期限に設定できます。 Expires と Cache-Control max-age の両方が設定されている場合は、 Cache-Control max-age が優先されます。 Expires または Cache-Control max-age 6
  3. Expires または Cache-Control max-age HTTP/1.1 200 OK Content-Type: text/html Date:

    Tue, 10 Dec 2024 00:00:00 GMT Expires: Wed, 10 Dec 2025 00:00:00 GMT Cache-Control: max-age=31557600 レスポンス日時から 1 年間(31557600 秒) がキャッシュ期限 Expires または Cache-Control max-age 7
  4. If-Modified-Since リクエスト GET /index.html HTTP/1.1 Host: example.com If-Modified-Since: Tue, 10

    Dec 2024 00:00:00 GMT レスポンス HTTP/1.1 304 Not Modified Date: Tue, 10 Dec 2024 00:00:00 GMT If-Modified-Since 9
  5. ETag/If-None-Match ETag は、リソースのハッシュ値を表す文字列で、リソースが更新され ると変更されます。 クライアントは、リソースの ETag をサーバーに伝えることができま す。 サーバーは、リソースの ETag

    とクライアントが伝えた ETag を比較 し、リソースが更新されていない場合は 304 Not Modified を返しま す。 304 Not Modified は、サーバーからリソースを取得せず、クライアン トのキャッシュを使用することを示します。 ETag/If-None-Match 10
  6. ETag/If-None-Match リクエスト GET /index.html HTTP/1.1 Host: example.com If-None-Match: "abc123" レスポンス

    HTTP/1.1 304 Not Modified Date: Tue, 10 Dec 2024 00:00:00 GMT ETag/If-None-Match 12
  7. まとめ HTTP キャッシュは、Web サーバーから取得したデータを一時的に保存する仕 組み ヒューリスティックキャッシュは、キャッシュ期限が設定されていない場合 に、ブラウザが自動的にキャッシュ期限を設定 Expires または Cache-Control

    max-age でキャッシュの有効期限を設定 If-Modified-Since は、リソースの最終更新日時を伝え、304 Not Modified で キャッシュを使用 ETag/If-None-Match は、リソースの ETag を伝え、304 Not Modified でキャ ッシュを使用 キャッシュしない場合は、 Cache-Control: no-store レスポンスヘッダーを設定 まとめ 14