WEBエンジニア
PHP 分類

Webキャッシュ(WEB Cache)とは何ですか?【Webキャッシュの特徴】

投稿者情報

  • 運営局 投稿
  • 投稿日

コンテンツ情報

本文内容

【Webキャッシュ概要】

キャッシュの基本概念:キャッシュ(Cache)は、アプリケーションの処理速度を高めます。すでに読み込んだデータや計算された結果値のコピーを保存して置くことにより、処理速度を向上させ、それ以来の要求をより迅速に処理することができます。ほとんどのプログラムは、同じデータやコマンドの繰返してアクセスするのでキャッシュは、効率的なアーキテクチャパターンです。

 

Webキャッシュ(WEB Cache):  ユーザー(client)が、ウェブサイト(server)に接続する際には、静的コンテンツ(画像、JS、CSS、など)を特定の場所(client、networkなど)に保存して置き、ウェブサイトサーバーに該当するコンテンツを毎回要求して受けることでなく、特定の場所で読み込むことによってサイトの応答時間を減らしサーバーのトラフィックの減少効果があります。

 

 

ウェブキャッシュ

 

ウェブキャッシュとはclientが要求しているhtml、image、js、cssなどについて、初要求された時にファイルをダウンロードして、特定の場所にコピーを保存(USING SPACE)で、 以降、同じURLのResource要求があった場合は再びダウンされず、内部に保存したファイルを使用して、より迅速なサービス(SAVE TIME)を提供するためのものです。 サーバーを介してダウンロードする量が減り応答時間が減少し、ネットワークトラピックも減少されるのでserverとclientの両方ともWIN-WINすることができます。 

 

ウェブキャッシュの種類

 

ウェブキャッシュの種類はどこに適用するかによって、次のように分割することができ、この中で重点的なのはBrowser Cacheです。

 

1. Browser Caches

- ブラウザまたはHTTPリクエストをするクライアント Applicationによって内部ディスクにキャッシュする。

- CacheたResourceを共有していない個人に限られたCache

- ブラウザの戻るボタンまたは既に訪問したページを再訪問する場合利用される。

 

2. Proxy Caches

- Browser Cacheと同じ原理で動作し、ClientやServer以外のネットワーク上で動作。

- 大企業やIPSのファイアウォールに設置され待機時間及びトラフィック減少、アクセスポリシー&制限バイパス、使用率記録などを実行

- 限られた数のクライアントの為、無限のWebサーバーのコンテンツをキャッシュ

  

3. Gateway Caches(REVERSE OR SURROGATE PROXY)

- サーバの前段(内部的)に設置され、要求のキャッシュ及び効率的な分配を介して可用性、信頼性、性能などを向上

- Encryption / SSL acceleration、Load balancing、Serve / cache static content、Compressionなどを行う

- 無限のクライアントに限られた数(又は、一つ)のWebサーバーのコンテンツを提供

 

どのようにキャッシュをコントロールするか?

 

ブラウザは、一度要求されたファイルは、その後は、キャッシュを利用すると言いました。しかし、もしキャッシュすべきではない又は、キャッシュされた内容に変更が発生した場合どうなるでしょう?ブラウザがどのようにキャッシュをコントロールしているかを調べてみましょう。キャッシュをコントロールする方法には、大きく2つの方法があります。

 

1. HTML Meta Tags

<META HTTP-EQUIV = "EXPIRES" CONTENT = "Mon、22 Jul 2002 11:12:01 GMT">
<META HTTP-EQUIV = "CACHE-CONTROL" CONTENT = "NO-CACHE">

 

最初の方法は、上記のようなHTML Meta Tagをページに挿入する方法です。しかし、この方法は、過去いくつかのブラウザでのみ有効し、現在ではもはや使用しない方法です。

 

2. HTTP Headers

 

  HTTP 1.0 (1996   HTTP 1.1 (1999  
  REQUEST RESPONSE REQUEST RESPONSE
validation If-Modified-Since Last-Modified  If-None-Match Entity Tag(Etag)
freshness Pragma Expires Cache-Control Cache-Control

 

2つ目の方法は、

HTTP Headersを使用する方法で、現在多く使われている方法です。 

ファイルを以前のものと比較して、変更されたかをチェックするvalidationとキャッシュの有効期限をチェックするfreshnessで構成されます。requestとresponseに応じて使用することができる値が異なり、HTTP1.0からHTTP1.1にアップデートしながら、少しの変化があります。HTTP 1.1では、下位互換性があり1.0のheaderを使用しても正常に動作しますがが重複して宣言たら1.1で定義されたものが優先順位を持つようになります。 

たとえば 、Last-ModifiedおよびEtagが同時にある場合Etagに優先順位があります。 ExpiresとCache-Controlも同じ です。

 

HTTP 1.1のCache-Controlは、一つの値ではなく、様々な指示語を、","を使用して、値を渡すことができます。そのため、様々なコントロールが可能になります。

ex)Cache-Control:max-age = 3600、must-revalidate

 

指示語 解説
max-age=[sec]

Expires と同じ意味だが、固定された絶対時間値ではなく、要求時からの相対的な時間を表示します。  ※ 記載の場合

s-maxage=[sec]

max-ageと同じ意味だがshared caches(例えば、proxy)にのみ適用されます。

 ※ 記載の場合max-ageやExpiresより優先順位があります。

public

一般的にはHTTP認証がされた状態で起こる応答は、自動的にprivateになります。

 publicを明示的に設定すると、認証された状態でもキャッシュするようにします。

private

特定のユーザーユーザーのブラウザのみキャッシュするように設定します。 複数の人が使用しているネットワーク上の中間子(intermediariesの役割をする shared caches(:proxy)ではキャッシュされません

no-cache

応答データをキャッシュしてはいるが、 先にサーバーに要求して検証(validation)をするように強制します。  ある程度キャッシュの効用を得ながらも、コンテンツの freshnessを強制的に維持するのにお勧めします

no-store どんな状況でも対応する response データを保存しません
no-transform

プロキシは、どのようなイメージやドキュメントをパフォーマンスを改善するために最適化されたフォーマットに変換などの自動化された動作をします。これらのことを望まない場合は、このオプションを明示してくれることをお勧めします

must-revalidate  HTTPは、特定の状況ネットワーク接続が切断されたときなど)では、 freshしていないキャッシュデータにもかかわらず使用する場合がありますが、 金融取引などの状況では、このような動作が誤った結果につながる可能性があるため、この指示語を介しての使用を防止します
proxy-revalidate  must-revalidateと似ていますが、 shared caches(:proxy)にのみ適用されます

 

 developers.google.comの Ilya Grigorik私たちの状況に合わせて簡単に選択できるように、次の図を提供しています。

 

XyRWvGr.png

 

* Pragmaの場合、少しの誤解があるようですが、responseのHTTP仕様はなくrequestでのみ使用することができます。いくつかのキャッシュは、このヘッダーによって処理されることになりますが、ほとんどは処理されないため、使用しないのをお勧めします。http1.0に存在し 1.1では無視されます。 つまり、  response.setHeader(「Pragma "、" no-cache ");  は動作しません。 

 

では、どのようにキャッシュが動作するか?

 

今キャッシュが起こる過程で上記のhttp headerがどのように使用されるのか解説します。 

 

最初の要求

 

1.ブラウザは、サーバーにindex.htmlファイルを要求します。 

2.サーバーは、index.htmlファイルを検索し、存在するファイルであれば、ファイルの内容をブラウザにいくつかのheader値と共に応答します。

3.ブラウザは、受けた内容をブラウザに表示し、応答ヘッダの内容に基づいてキャッシュポリシーを実行します。

   (レスポンスヘッダに Last-Modified、  Etag、  Expires Cache-Control:max-age 項目が存在する場合コピーを作成して、値を保存)

 

D5F8Zh5.png

 

再要求

 

1. LAST-MODIFIED

 

pClbzxU.jpg

 

1.ブラウザは、最初の応答時に受信したLast-Modified値をIf-Modified-Sinceと呼ばれるヘッダに含ませてページを要求します。

 

 2.サーバは、要求ファイルの修正時間をIf-Modified-Sinceの値と比較して同じであるならば304 Not Modifiedに応答し、異なっている場合、200 OKと新しいLast-Modified値をレスポンスヘッダに送信します。

 

 3.ブラウザは、応答コードが304の場合キャッシュからページをロードし、200であればダウンロードした後、Last-Modified値を更新します。

 

2. ETAG(ENTITY TAG)

 

RCgfR3F.jpg

 

1.ブラウザは、最初の応答 時に受信したEtag値をIf-None-Matchというヘッダに含ませページを要求します。

 

 2.サーバは、要求ファイルのEtag値をIf-None-Matchの値と比較し同一である場合、304 Not Modifiedに応答して、異なっている場合、200OKと新しいEtag値をレスポンスヘッダに転送します。    

 

 3. ブラウザは、応答コードが304である場合キャッシュからページをロードし、200であれば新しくダウンロードされた後、Etag値を更新します

 

* Etagは、サーバーごとに生成する値が異なり、ファイルごとに固有の値があります。詳細については、後に解説します。

* LAST-MODIFED(1.0)とETAG(1.1)は、validationをチェックします。これをチェックするためには、サーバーと一度の通信が発生することになり、それによって、要求と応答のheaderとcookieなどによるデータ転送(1KB)が発生することになります。 

 

3. Expires

 

bP13VMv.jpg

 

1.ブラウザは、最初の応答時に受信したExpires時間を比較して期間内であれば、サーバーを経由せずに直接キャッシュからページをロードします。もし期間が満了された場合、上記のvalidationのタスクを実行します。

 

4. Cache-Control

 

CZbQ8b8.jpg

 

1.ブラウザは、最初の応答時に受信したCache-Controlの中max-age値(秒単位)を GMTと比較して期間内であれば、サーバーを経由せずキャッシュからページをロード します。もし期間が満了された場合validationのタスクを実行します。

 

* Expires(1.0)とCache-Control:max-age(1.1)は、freshnessをチェックします。期間内であれば、サーバーとの通信をせず、キャッシュを使用します。

*時間はHTTP date形態でローカルタイムではなく、GMTを使用します。

*サーバーがLast Modified TimeまたはLast Access Timeを基準にして、一定時間後、Expiresまたはmax-ageを設定します。

 

どのようにキャッシュを設定するか?

 

キャッシュは、サーバーで設定しますが、ファイル拡張子名で別の方法で設定するか、ディレクトリごとに別々に設定することができます。また、ExpiresやEtagは、サーバーの設定によって、使用しないこともあります。expiresが設定されると、Expiresとmax-ageが同じのように設定されます。


TWvWAg9.png
 

WEB-CACHE

(TIME-SPACE TRADEOFF)

 

- WebCache

- Code Compressing

- Image Optimizing

- Image Spriting

- Critical Rendering Path

- Webfont Optimizing

- Lazy Loading

- その他....

 

WEBキャッシュ

 

WEBキャッシュとはclientが要求しているhtml、image、、js、cssなどについて、初の要求の際にファイルをダウンロードして、特定の場所にコピーを保存(USING SPACE)しておいて以降、同じURLのResource要求は再びダウンされず、内部に保存したファイルを使用して、より迅速なサービス(SAVE TIME)をするためのものです。 

サーバーを介してダウンロードする量が少なくレスポンスタイムが減少し、ネットワークトラピックが減りますのでserverとclientの両方がwin-winすることができる最高のtradeoffであると思います。 

 

WEBキャッシュの種類

 

WEBキャッシュの種類はどこに適用するかによって、次のように分割することができ、この中で重点的に見る内容はBrowser Cacheです。

 

1. Browser Caches

- ブラウザまたはHTTPリクエストをするClient Applicationによって内部ディスクにキャッシュ

- CacheされたResourceを共有していない個人に限られたCache

- ブラウザのBackボタンまたは既に訪問したページを再訪問する場合

 

2. Proxy Caches

- Browser Cacheと同じ原理で動作し、ClientやServer以外のネットワーク上で動作。


- 大企業やIPS、ファイアウォールにインストールされ待機時間及びトラフィックの減少、アクセスポリシー&制限バイパス、使用率の記録などを実行

- 限られた数のクルライオントゥウルに無限大のWebサーバーのコンテンツをキャッシュ

  

3. Gateway Caches(REVERSE OR SURROGATE PROXY)

- サーバ前段に設置されて、要求のキャッシュと効率的な分配を介して可用性、信頼性、性能などを向上させる

- Encryption / SSL acceleration、Load balancing、Serve / cache static content、Compressionなどを行う

- 無限のクライアントに限られた数(またはいずれか)のWebサーバーのコンテンツを提供してい

 

 

 

どのようにキャッシュをコントロールするか?

 

ブラウザは、一度要求されたファイルは、その後は、キャッシュを使用すると言いました。しかし、もしキャッシュされないようにしたり、キャッシュされた内容に変更が発生した場合どうなるでしょう?ブラウザがどのようにキャッシュをコントロールしていることを知ってみましょう。キャッシュをコントロールする方法には、大きく2つの方法があります。

 

1. HTML Meta Tags

<META HTTP-EQUIV = "EXPIRES" CONTENT = "Mon、22 Jul 2002 11:12:01 GMT">
<META HTTP-EQUIV = "CACHE-CONTROL" CONTENT = "NO-CACHE">

 

最初の方法は、上記のようなHTML Meta Tagをページに挿入する方法です。しかし、この方法は、過去のいくつかのブラウザのみ有効し、現在ではもはや使用しない方法です。 

 

 

2. HTTP Headers

 

 HTTP 1.0(1996年)

 HTTP 1.1(1999年)

 

 REQUEST

 RESPONSE

 REQUEST 

 RESPONSE

 validation

 If-Modified-Since

 Last-Modified

 If-None-Match

 Entity Tag(Etag)

 freshness

 Pragma

 Expires

 Cache-Control

 

 Cache-Control

 

第二の方法は、HTTP Headersを使用する方法で、今私たちが使っている方法です。 

ファイルが以前と比較して、変更されたかをチェックするvalidationとキャッシュの有効期限をチェックするfreshnessで構成されます。requestとresponseに応じて使用することができる値が異なり、HTTP1.0でHTTP1.1に進みながら、少しの変化があります。HTTP 1.1では、下位互換性があり1.0のheaderを使用しても正常に動作が重複して宣言たら1.1で定義されたものの優先順位を持つようになります。 

たとえば 、Last-ModifiedおよびEtagが同時にある場合Etagが優先順位があります。 ExpiresとCache-Controlも同じ です。

 

HTTP 1.1のCache-Controlは、一つの値ではなく、様々な表示器を、を使用して、値を渡すことができます。そのため、様々なコントロールを可能にしてくれます。ex)Cache-Control:max-age = 3600、must-revalidate

 

 表示器

 説明

 max-age = [sec]

 Expires と同じ意味だが、固定された絶対時間値ではなく、要求時からの相対的な時間を表示します。  

 記載の場合

 

 s-maxage = [sec]

 max-ageと同じ意味だがshared caches(例えば、proxy)にのみ適用されます。

 記載の場合max-ageやExpiresより優先順位があります。

 public

 一般的に、HTTP認証がされた状態で起こる応答は、自動的にprivateになります。

 publicを明示的に設定すると、認証がされた状態でもキャッシュするようにします。

 

 private

 特定のユーザーユーザーのブラウザのみキャッシュするように設定します。 複数の人が使用しているネットワーク上の中間子

 (intermediari es の役割をする shared caches(例えば:proxy) は場合、キャッシュされません

 

 no-cache

 応答データをキャッシュしてはいるが、 最初にサーバーに要求して検証(validation)をするように強制します。 

 ある程度キャッシュの効用を享受しながらも、コンテンツの freshnessを強制的に維持するのにお勧めします

 

 no-store

 どんな状況でも対応する response データを保存しません

 

 no-transform

 いくつかのプロキシは、どのようなイメージやドキュメントをパフォーマンスを改善するために最適化されたフォーマットに変換するなどの自動化された動作を 

 にこれらのことを望まない場合は、このオプションを明示してくれることをお勧め

 

 must-revalidate

 HTTPは、特定の状況ネットワーク接続が切断されたときなどは、 freshしていないキャッシュデータにもかかわらず使用する場合がありますが、 金融取引などの状況では、このような動作が誤った結果につながる可能性があるため、この表示器を介して、そのような使用を防止します

 

 proxy-revalidate

 must-revalidateと似ていますが、 shared caches(例えば:proxy)にのみ適用されます

 

 

 

developers.google.comのIlya Grigorik分、私たちが状況に合わせて簡単に選択できるように、次の図を提供しています。

 

271252475582250020

 

 

 

 

 

* Pragmaのインターネットに流れる場合、少しの誤解があり、responseのHTTP仕様がありません。ただrequestでのみ使用することができいくつかのキャッシュは、このヘッダーによって処理されることがありますが、ほとんどは処理されないため、使用しないでください。http1.0に存在し 1.1で無視されます。 つまり、  response.setHeader(「Pragma "、" no-cache ");  は動作しません。 

 

 

 

 

どのようにキャッシュが動作するか?

 

今キャッシュが起こる過程で上記のhttp headerがどのように使用されるか見てみましょう。 

 

最初の要求

 

1.ブラウザは、サーバーにindex.htmlファイルを要求します。 

2.サーバーは、index.htmlファイルを参照し、存在するファイルであれば、ファイルの内容をブラウザにいくつかのheader値と一緒に応答します。

3.ブラウザは、応答を受けた内容をブラウザに表示し、応答ヘッダの内容に基づいてキャッシュポリシーを実行します。

   (レスポンスヘッダに Last-Modified、  Etag、  Expires Cache-Control:max-age 項目が存在する場合のコピーを作成して、値を保存)

 

 

25349F4B5582250F20

 

 

 

再要求

 

1. LAST-MODIFIED

 

 

2453A54F558225240E

 1.ブラウザは、最初の応答時に受信したLast-Modified値をIf-Modified-Sinceとは、ヘッダに含ませてページを要求します。

 

 2.サーバは、要求ファイルの修正時間をIf-Modified-Sinceの値と比較して同じであるならば304 Not Modifiedに応答して、異なっている場合、200 OKと新しいLast-Modified値をレスポンスヘッダに送信します。

 

 3.ブラウザは、応答コードが304アンウーキャッシュからページをロードして、200と面新しくダウンロードした後、Last-Modified値を更新します。

 

 

 

 

2. ETAG(ENTITY TAG)

 

 

26102C4E558225420B

 1.ブラウザは、最初の応答 時に受信したEtag値をIf-None-Matchというヘッダに         含ま せてページを要求します。

 

 2.サーバは、要求ファイルのEtag値をIf-None-Matchの値と比較して同一である場合、304 Not Modifiedに応答して、異なっている場合、200 OKと新しいEtag値をレスポンスヘッダに転送します。    

 

 3. ブラウザは、応答コードが304アンウーキャッシュからページをロードして、200と面新しくダウンロードされた後、Etag値を更新します

 

 

* Etagは、サーバーごとに生成する値が異なり、ファイルごとに固有の値があります。詳細については、後にまたします。

* LAST-MODIFED(1.0)とETAG(1.1)は、validationをチェックします。これをチェックするために、サーバーと一度の通信が発生することになり 、それによって、要求と応答のheaderとcookieなどによるデータ転送(1KB)が発生することになります。 

 

 

 

3. Expires

 

237E5C4E5582255E16

1.ブラウザは、最初の応答時に受信したExpires時間を比較して期間内であれば、サーバーを経由せずに直接キャッシュからページをロードします。もし期間が満了された場合、上記のvalidationのタスクを実行します。

 

 

 

 

 

 

 

 

 

 

4. Cache-Control

 

213DD3485582257017

1.ブラウザは、最初の応答時に受信したCache-Controlのmax-age値(秒単位)を 

   GMTと比較して期間内であれば、サーバーを経由せずにキャッシュからページをロード 

   します。もし期間が満了された場合validationのタスクを実行します。

 

 

 

 

 

 

 

 

 

* Expires(1.0)とCache-Control:max-age(1.1)は、freshnessをチェックします。期間内であれば、サーバーとの通信をせずに、キャッシュを使用します。

*時間はHTTP date形態でローカルタイムではなく、GMTを使用します。

*サーバーがLast Modified TimeまたはLast Access Timeを基準にして、一定時間後にExpiresまたはmax-ageを設定します。

 

 

 

 

どのようにキャッシュを設定しますか?

キャッシュは、サーバーで設定するファイルの拡張子名で別の方法で設定するか、ディレクトリごとに別々に設定することができます。また、ExpiresやEtagは、サーバーの設定によって、使用しないことがあります。expiresが設定されると、Expiresとmax-ageがように設定されます。

 

 

25491C4B5582258617

 

CACHING STRATEGY 

キャッシュが正しく適用されるようにするには次のような目標を立てます。

 

1.一貫したURLを使ってください。同じURLは、同じサイトであれば、他のページでもキャッシュされ使用することができます。

2.頻繁に変更されるファイルとそうでないファイルを分離します。それで各Resourceに対して最適のfreshnessを設定することができます。

3.ダウンロード可能なファイルの内容が変わると名前(URL)を変更します。それで正しく修正されたバージョンを提供することができます。

4. SSLを最小限に抑えます。暗号化されたページは、キャッシュされません。

 

RealWorld

キャッシュが適用されると、Webページが表示される速度自体が異なります。次のように同じ要求に対してキャッシュ前、validation、freshness場合です。

 

 QQeHSdH.png

 

キャッシュ前後のSize(7.0KB - > 123B - > from cache)とTime(69ms - > 11ms - > 1ms)を見ると、明確に違いが発生することを 知ることができます。キャッシュのみ適用すれば、ユーザーにすぐサービスを提供することができるようになります。 

しかし、実際適用してみると、様々な問題が発生します。世の中はそれほど甘くはないんですよ~

 

1. freshnessをcheckするExpiresと Cache-Control:max-ageは、ファイルがまだ有効であると判断された場合は、サーバーに送信せず、キャッシュを使用します。もしサーバーでCSSやJAVASCRIPTが変更された場合は有効期間が満了するまで、またはユーザーが強制的にキャッシュを削除するまでは、ユーザーごとにキャッシュの状態に応じて、異なる画面を見ることができます。 

 

2.リアル環境のサーバー構成は、一台で構成されず、複数台のサーバーで構成されている場合が多いです。この場合は、より大きな問題が発生します。

 

HxlnnVX.jpg

 

図のように構成された場合、ユーザーはL4によりそれぞれの状況に合わせて分配されるようになります。キャッシュをコントロールするEtag、Last-Modifiedは、ファイルの最終時間に関連しています。しかし、サーバーが互いに眺めるファイルが異なっている場合、ファイルの修正時間が異なるものであり、ユーザーが1番サーバーでキャッシュし受信したLast-ModifiedまたはEtag値が2番サーバーとは異なりますので、1番と2番を交代で接続される毎回ごとにキャッシュは無効になり、再び最初からダウンロードする操作を再度行うことになります。もしL4の分配アルゴリズムがRound robinならさらにこの現象は、ひどくなります。 

 

3.  Etagは、基本的には、決められたいくつかの値を持っているMD5 Hashなどの方法でdigestされた値です。ファイルの内容のみ持ってdigestすれば、サーバーが違うとしても何の問題も発生しませんが、ファイルの内容を毎回digestして比較することは、あまりにも非効率的になります。だから、各サーバーごとに設定しておいたデフォルト値を持って Etagを生成します。もちろん設定を通じて値を変えたり、Etagを使用しない場合もあります。

 

サーバー デフォルト
Apache INode + MTime + Size
Nginx MTime  + Size
IIS MTime + ChangeNumber
Tomcat Size + MTime

 

表に示すように、すべてのサーバーは、Modification Timeを共通に使用します。2番と同じ問題が発生する可能性があります。また、ApacheまたはIISは、サーバーが、特別に管理するINode値やChangeNumberを適用して生成しますが同様に、サーバごとにその値が異なりMtimeが同じであっても、作成されたEtagの値は異なります。

.

.

.

.

 

関連資料

新着投稿


  • 投稿がありません。

新着書込み


  • 書込みがありません。
アラート 0