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
150
スマホアプリエンジニアでない方へ向けた、スマホアプリ開発に関連するトピック
greendrop
0
140
知っててうれしい HTTP について
greendrop
0
200
知っててうれしい HTTP Cookie について
greendrop
0
180
知っててうれしいデータベースについて
greendrop
0
190
Other Decks in Technology
See All in Technology
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
260
MLflowはどのようにLLMOpsの課題を解決するのか
taka_aki
0
140
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
180
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
820
2025/3/1 公共交通オープンデータデイ2025
morohoshi
0
110
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
540
どうすると生き残れないのか/how-not-to-survive
hanhan1978
2
410
Global Databaseで実現するマルチリージョン自動切替とBlue/Greenデプロイ
j2yano
0
170
20250304_赤煉瓦倉庫_DeepSeek_Deep_Dive
hiouchiy
2
130
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
560
【Forkwell】「正しく」失敗できるチームを作る──現場のリーダーのための恐怖と不安を乗り越える技術 - FL#83 / A team that can fail correctly by forkwell
i35_267
2
120
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
400
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Designing for Performance
lara
605
68k
Side Projects
sachag
452
42k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Invisible Side of Design
smashingmag
299
50k
Writing Fast Ruby
sferik
628
61k
Thoughts on Productivity
jonyablonski
69
4.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
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