こんにちは、技術チームの李です。
少し前に開催された勉強会の内容を共有させていただきます。
今回は陳さんによる「Cache雑談」です。
Web Cacheの全体像
まずこちらをご覧ください。こちらはHttpリクエスト/レスポンスのサイクルです。この中のどの過程にキャッシュが存在していると思いますか?
![Httpリクエスト](https://www.inagora.com/wp-content/uploads/2021/10/Httpリクエスト.png)
まずは右側のClient部分。皆さん馴染みのあるWebブラウザ、これは当然キャッシュが存在します。
次はWebサーバーキャッシュです。二回目以降データを生成せずにブラウザへデータ送信するようにできます。データベースについては、クライアントサイドやリモートにキャッシュすることがあります。ディスクストレージにはキャッシュメモリが存在し、前回読み出した内容を一時的にメモリに保持しておくことで、次回からは読み書きの早いメモリからデータを読み出せます。
![キャッシュ全体像](https://www.inagora.com/wp-content/uploads/2021/10/キャッシュ全体像.png)
こちらがキャッシュの全体像になります。
意外にいろんなところにキャッシュが存在していますね。
今回陳さんは重点的にフロントキャッシュについてお話してくださいました。
Httpキャッシュの全体流れ
![フロントキャッシュ](https://www.inagora.com/wp-content/uploads/2021/10/フロントキャッシュ.png)
1. 一回目のリクエストで、サーバーはresponse headerでキャッシュ情報を設定する
2. 二回目のリクエストで、ブラウザは1のheaderを判断して、強制キャッシュ使うか?条件キャッシュ使うか?
実際Httpリクエストレスポンス時のブラウザ、ブラウザキャッシュ、サーバー間の動きは以下のようになります。
![httpリクエスト時](https://www.inagora.com/wp-content/uploads/2021/10/httpリクエスト時.png)
強制キャッシュ
![強制キャッシュ](https://www.inagora.com/wp-content/uploads/2021/10/強制キャッシュ.png)
レスポンス時のキャッシュディレクティブ
![レスポンス時のキャッシュディレクティブ](https://www.inagora.com/wp-content/uploads/2021/10/レスポンス時のキャッシュディレクティブ.png)
ExpiresはローカルPCの時間に依存しいて、Cache-Controlの方は優先度が高い。
条件キャッシュ
![条件キャッシュ](https://www.inagora.com/wp-content/uploads/2021/10/条件キャッシュ.png)
Last-Modified & If-Modified-Since
![Last-Modified & If-Modified-Since](https://www.inagora.com/wp-content/uploads/2021/10/Last-Modified-If-Modified-Since.png)
最新かどうかサーバーで判断します。304は処理がとても早いです。
ETag & If-None-Match
![Etag & If-none-match](https://www.inagora.com/wp-content/uploads/2021/10/Etag-If-none-match.png)
Last-Modified VS ETag
1. Etagの精度が高いが時間がかかる。Hash計算
2. Last-Modifiedのパフォーマンスが高い
3. Etagの優先順位が高い
Http Cache まとめ
![http cacheまとめ](https://www.inagora.com/wp-content/uploads/2021/10/http-cacheまとめ.png)
よくあるパターン
1. Cache-Control: no-cache→頻繁に更新するリリース
2. Cache-Control: max-age=31536000(一年)→あんまり更新しないリソース
(jquery.min.js、 lodash.min.js)
3. 静態ファイルは強制キャッシュを使うのは効率がいい(Http通信発生しないため)
4. ファイル名をHash化
ユーザーアクションの影響
![ユーザアクション](https://www.inagora.com/wp-content/uploads/2021/10/ユーザアクション.png)
![アクション Expires Last-Modified](https://www.inagora.com/wp-content/uploads/2021/10/アクション-Expires-Last-Modified.png)
Browser Cache
![Browser Cache](https://www.inagora.com/wp-content/uploads/2021/10/Browser-Cache.png)
![browser cache 流れ](https://www.inagora.com/wp-content/uploads/2021/10/browser-cache-流れ.png)
違いまとめ
![違いまとめ](https://www.inagora.com/wp-content/uploads/2021/10/違いまとめ.png)
感想
このように聞き覚えのある単語で、身近な存在なのに、実はそれに対してあまり理解していないことって多いですよね。
今回陳さんのCache勉強会を通して、Cacheの仕様やHttpリクエストレスポンス時における各優先度を知ることができました。
今後の開発でも、意識していきたいと思います。