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
280
知っててうれしい HTTP キャッシュについて
greendrop
December 12, 2024
Tweet
Share
More Decks by greendrop
See All by greendrop
GitHub Actions の設定を少しよくする
greendrop
0
23
リンクからモバイルアプリを起動する技術
greendrop
0
11
知っててうれしい SQL について
greendrop
0
250
知っててうれしい HTTP Cookie を使ったセッション管理について
greendrop
1
250
知っててうれしいリレーショナルデータベースについて
greendrop
0
210
スマホアプリエンジニアでない方へ向けた、スマホアプリ開発に関連するトピック
greendrop
0
180
知っててうれしい HTTP について
greendrop
0
270
知っててうれしい HTTP Cookie について
greendrop
0
250
知っててうれしいデータベースについて
greendrop
0
250
Other Decks in Technology
See All in Technology
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
1
1.1k
CoRL 2025 Survey
harukiabe
0
190
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.5k
ユーザーの声とAI検証で進める、プロダクトディスカバリー
sansantech
PRO
1
140
『バイトル』CTOが語る! AIネイティブ世代と切り拓くモノづくり組織
dip_tech
PRO
1
130
LLM時代にデータエンジニアの役割はどう変わるか?
ikkimiyazaki
6
1.4k
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
930
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
6
1.1k
フレームワークを意識させないワークショップづくり
keigosuda
0
170
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
310
アイテムレビュー機能導入からの学びと改善
zozotech
PRO
0
150
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
We Have a Design System, Now What?
morganepeng
53
7.8k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The World Runs on Bad Software
bkeepers
PRO
72
11k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
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