Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
知っててうれしい HTTP キャッシュについて
Search
greendrop
December 12, 2024
Technology
0
250
知っててうれしい HTTP キャッシュについて
greendrop
December 12, 2024
Tweet
Share
More Decks by greendrop
See All by greendrop
GitHub Actions の設定を少しよくする
greendrop
0
20
リンクからモバイルアプリを起動する技術
greendrop
0
7
知っててうれしい SQL について
greendrop
0
220
知っててうれしい HTTP Cookie を使ったセッション管理について
greendrop
1
220
知っててうれしいリレーショナルデータベースについて
greendrop
0
190
スマホアプリエンジニアでない方へ向けた、スマホアプリ開発に関連するトピック
greendrop
0
170
知っててうれしい HTTP について
greendrop
0
250
知っててうれしい HTTP Cookie について
greendrop
0
220
知っててうれしいデータベースについて
greendrop
0
230
Other Decks in Technology
See All in Technology
完璧を目指さない小さく始める信頼性向上
kakehashi
PRO
0
130
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
220
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
sansan_randd
0
150
P2P ではじめる WebRTC のつまづきどころ
tnoho
1
280
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
180
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
8
620
生成AIによる情報システムへのインパクト
taka_aki
1
220
SAE J1939シミュレーション環境構築
daikiokazaki
1
200
AWS表彰プログラムとキャリアについて
naoki_0531
1
150
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
15
7.9k
Tableau API連携の罠!?脱スプシを夢見たはずが、逆に依存を深めた話
cuebic9bic
2
160
人に寄り添うAIエージェントとアーキテクチャ #BetAIDay
layerx
PRO
1
180
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
Docker and Python
trallard
45
3.5k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Writing Fast Ruby
sferik
628
62k
Building Adaptive Systems
keathley
43
2.7k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Transcript
知っててうれしい HTTP キャッシュについて 2024/12/10 1
目次 HTTP キャッシュとは ヒューリスティックキャッシュ Expires または Cache-Control max-age If-Modified-Since ETag/If-None-Match
キャッシュしない まとめ 2
HTTP キャッシュとは HTTP キャッシュは、Web サーバーから取得したデータを一時的に保 存する仕組みです。 同じデータを再度取得する際に、キャッシュから取得することで、通 信量を削減し、応答速度を向上させることができます。 HTTP キャッシュとは
3
ヒューリスティックキャッシュ ヒューリスティックキャッシュは、サーバーからのレスポンスにキャ ッシュ期限が設定されていない場合に、ブラウザが自動的にキャッシ ュ期限を設定する仕組みです。 レスポンスヘッダーに Cache-Control: max-age=3600 などのキャッシュ 期限が設定されていない場合に、ブラウザが自動的にキャッシュ期限 を設定します。
ヒューリスティックキャッシュ 4
ヒューリスティックキャッシュ 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
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
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
If-Modified-Since クライアントがリソースを取得する際に、サーバーに対してリソース の最終更新日時を伝えることができます。 サーバーは、リソースの最終更新日時とクライアントが伝えた最終更 新日時を比較し、リソースが更新されていない場合は 304 Not Modified を返します。 304
Not Modified は、サーバーからリソースを取得せず、クライアン トのキャッシュを使用することを示します。 If-Modified-Since 8
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
ETag/If-None-Match ETag は、リソースのハッシュ値を表す文字列で、リソースが更新され ると変更されます。 クライアントは、リソースの ETag をサーバーに伝えることができま す。 サーバーは、リソースの ETag
とクライアントが伝えた ETag を比較 し、リソースが更新されていない場合は 304 Not Modified を返しま す。 304 Not Modified は、サーバーからリソースを取得せず、クライアン トのキャッシュを使用することを示します。 ETag/If-None-Match 10
ETag/If-None-Match 初回レスポンス HTTP/1.1 200 OK Content-Type: text/html ETag: "abc123" ETag/If-None-Match
11
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
キャッシュしない キャッシュを行わない場合は、レスポンスヘッダーに Cache-Control: no-store を設定します。 HTTP/1.1 200 OK Content-Type: text/html
Cache-Control: no-store キャッシュしない 13
まとめ 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
ご清聴ありがとうございました。 15