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
260
知っててうれしい HTTP キャッシュについて
greendrop
December 12, 2024
Tweet
Share
More Decks by greendrop
See All by greendrop
GitHub Actions の設定を少しよくする
greendrop
0
20
リンクからモバイルアプリを起動する技術
greendrop
0
9
知っててうれしい SQL について
greendrop
0
230
知っててうれしい HTTP Cookie を使ったセッション管理について
greendrop
1
230
知っててうれしいリレーショナルデータベースについて
greendrop
0
200
スマホアプリエンジニアでない方へ向けた、スマホアプリ開発に関連するトピック
greendrop
0
170
知っててうれしい HTTP について
greendrop
0
260
知っててうれしい HTTP Cookie について
greendrop
0
230
知っててうれしいデータベースについて
greendrop
0
230
Other Decks in Technology
See All in Technology
ABEMAにおける 生成AI活用の現在地 / The Current Status of Generative AI at ABEMA
dekatotoro
0
590
新卒(ほぼ)専業Kagglerという選択肢
nocchi1
1
1.8k
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
4
1.6k
Mackerel in さくらのクラウド
cubicdaiya
1
410
広島発!スタートアップ開発の裏側
tsankyo
0
180
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
abemii
0
180
Engineering Failure-Resilient Systems
infraplumber0
0
130
生成AI活用のROI、どう測る? DMM.com 開発責任者から学ぶ「AI効果検証のノウハウ」 / ROI of AI
i35_267
4
150
Oracle Exadata Database Service on Cloud@Customer X11M (ExaDB-C@C) サービス概要
oracle4engineer
PRO
2
6.4k
マイクロモビリティシェアサービスを支える プラットフォームアーキテクチャ
grimoh
1
160
RAID6 を楔形文字で組んで現代人を怖がらせましょう(実装編)
mimifuwa
0
270
MCPサーバーを活用したAWSコスト管理
arie0703
0
150
Featured
See All Featured
The Language of Interfaces
destraynor
160
25k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Facilitating Awesome Meetings
lara
55
6.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
BBQ
matthewcrist
89
9.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Code Reviewing Like a Champion
maltzj
525
40k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
560
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