tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

【 HTTP 】キャッシュ cache をざっくり解説!!!

今日はキャッシュあたりで作業がつっかえました。
色々調べたので、まとめます。笑

本日はキャッシュについて、ざっくり解説していこうと思います。

webページを作る際、実際にブラウザで表示して確認する「ブラウザテスト」なるものがあります。
そこでは時々「修正完了です!!」といただいたURLをブラウザで開いても
「何も変わってないじゃん...??」となることがあります。

本人が修正し忘れてた、なんて場合もありますが
ほとんどはキャッシュの仕業じゃないかなと思います。

キャッシュとは

一度開いたwebページの内容を保存して
次に読み込んだ時により早い読み込みを実現する仕組みのことです。

メリットとデメリット

  • メリット
・通信速度が高速がする。  
・(通信速度が高速化することで)seoランキングが上昇する。  
  • デメリット
場合によって更新したコンテンツがすぐに反映されない。  
キャッシュを貯めるとブラウザの動作が遅くなる。   

キャッシュはリソースを保管する倉庫

まずwebページを開くまでに
何千ものHTTPリクエストをサーバーに送信して
それに沿ってサーバーは画像やらファイルやらを提供します。

f:id:okinawanpizza:20200208070943j:plain
ん? 豆腐?

このやりとりが場合によっては一ページだけで1000回続くこともあります。
なので前回開いたページの一部分は保存しておいて、残りの分だけ取得すれば
より早くページを表示できる!!その仕組みがキャッシュというわけです。

f:id:okinawanpizza:20200208074705j:plain
前回の残りがあるから、必要な分だけ豆腐から取得することができる。

サーバーから取ってくる画像やファイルのことをまとめて「リソース」と呼び
キャッシュはそのリソースを保管することです。

次回HTTPリクエストのどこにキャッシュの内容が
記述されているか確認していきましょう。

おしまい