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
190
知っててうれしい HTTP キャッシュについて
greendrop
December 12, 2024
Tweet
Share
More Decks by greendrop
See All by greendrop
知っててうれしい SQL について
greendrop
0
170
知っててうれしい HTTP Cookie を使ったセッション管理について
greendrop
1
170
知っててうれしいリレーショナルデータベースについて
greendrop
0
160
スマホアプリエンジニアでない方へ向けた、スマホアプリ開発に関連するトピック
greendrop
0
140
知っててうれしい HTTP について
greendrop
0
200
知っててうれしい HTTP Cookie について
greendrop
0
180
知っててうれしいデータベースについて
greendrop
0
190
Other Decks in Technology
See All in Technology
ライフステージの変化を乗り越える 探索型のキャリア選択
tenshoku_draft
2
320
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
160
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
1.2k
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
810
エンジニアの健康管理術 / Engineer Health Management Techniques
y_sone
8
5.8k
人生を左右する「即答」のススメ: 一瞬の判断を間違えないためにするべきこと
takasyou
7
900
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
190
自分のやることに価値を見出だせるようになり、挑戦する勇気をもらったベイトソンの考え / Scrum Fest Fukuoka 2025
bonbon0605
0
160
きのこカンファレンス_ランチスポンサーセッション
kabaya
0
150
x86-64 Assembly Essentials
latte72
4
700
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
280
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
590
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
The Invisible Side of Design
smashingmag
299
50k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Building an army of robots
kneath
303
45k
Site-Speed That Sticks
csswizardry
4
420
A Tale of Four Properties
chriscoyier
158
23k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
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