入門
ページの最適化に言及、ブラウザのキャッシュが、周りの話題にする必要があり、ウェブサイトのパフォーマンスを判断する最も直感的なWebページのオープン速度を確認することです、そしてウェブの応答速度を改善する方法は、キャッシュを使用することです。良いキャッシュ戦略は、距離ページ要求リソースを短く待ち時間を短縮し、キャッシュファイルを再利用することができますので、また、帯域幅を削減し、ネットワークの負荷を軽減することができますすることができます。そのため、ブラウザのキャッシュメカニズムを理解し、それが特に重要です。
ここでは簡単にブラウザのキャッシュの下で
ブラウザがHTTP
応答モードを要求し、HTTP
サーバが要求に応答し、リソースを要求すると、リソースのキャッシュかどうかを判断するためにどのようにブラウザは、取得要求を取るか、または送信するためにブラウザのキャッシュに行くべき、要求を開始ITリソース
キャッシュキー:
- 結果は、ブラウザが要求を開始するたびに、要求が最初にブラウザのキャッシュとキャッシュ識別子になります
- たびに結果が返され得るために、ブラウザの要求と結果は、ブラウザのキャッシュ識別子キャッシュに格納されています
私たちは、ブラウザの要求を開始するかどうかに基づいて、必須相談キャッシュとキャッシュに分かれています
強制キャッシュ
サーバーにリクエストを送信しない、リソースがキャッシュから直接読み込まれ、chrome
コンソールnetwork
のオプションは、要求がステータスコード200、および返すことがわかりますsize
表示from disk cache
またはをfrom memory cache
グレー状態コードハードキャッシュを使用するための要求を示し、要求はに対応しSize
、それぞれ、バッファ記憶装置の位置を表す値from memory cache
とfrom disk cache
from memory cache
代表は、メモリ内キャッシュを使用するために、from disk cache
ハード・ディスク・キャッシュの使用を表し、ブラウザのキャッシュは順序がある読み込みますmemory – disk
。ブラウザでは、ブラウザがページを更新する際に、単純にメモリキャッシュから直接読み取る、JSファイルの解析と実行絵キャッシュメモリの後に預金を指示します(from memory cache)
;一方でcss
、ファイルがハードディスクのファイルに保存されますので、ページをレンダリングするたびにハードディスクのキャッシュから読み込まれる必要があります(from disk cache)
。
HTTP1.0キャッシュ
ではHTTP1.0
キャッシュの時代二つのフィールドを経由してクライアントに設定されている- Pragma
とExpires
規制します。これらの二つのフィールド早くも使い捨てとしてではなく、httpプロトコルを実行するためには、下位互換性がありますが、あなたはまだサイトの多くは、まだこれらの二つのフィールドをもたらすでしょう見ることができます。
プラグマ
フィールドがある場合にはno-cache
、時間(実際には今だけRFCはまた、オプションの値をマーク)、各ジョブのために、サーバへのリクエストをしていたキャッシュリソースを読み取ることではないクライアントに通知します。
有効期限が切れます
持っていたPragma
キャッシュを無効にするには、当然のキャッシュを有効にして、バッファ時間を定義するために何かを持っている必要がありHTTP1.0
、それは、Expires
このヘッダフィールドを行うことです。Expires
これは、の値に対応しGMT(格林尼治时间)
、例えば、Mon, 22 Jul 2002 11:12:01 GMT
あなたはその時点で要求を送信しません持っていなかった場合、リソースのブラウザのキャッシュの有効期限を伝えるために。
集合時間は時間が一貫性のないクライアントとサーバーの時間であり、かつキャッシュは意味がないということならば、一瞬のリソース「失敗」を設定し、タイムサーバーで期限切れになります
HTTP1.1新しいキャッシュ制御
「上記のためのExpires
時間相対サーバであり、クライアントは時間の統一を保証することはできません」の問題、HTTP1.1は、追加Cache-Control
のキャッシュの有効期限を定義します。注意:このメッセージは、表示された場合Expires
やCache-Control
、場所はCache-Control
フォーマットを使用して、勝訴:
"cache-control":cache-directive
第1の部分に対応するように、cache-directive
可能な値は次のとおりです。
public
:すべてのコンテンツは、(クライアントとプロキシサーバがキャッシュできる)キャッシュされます。PROXY1 - - PROXY2 - 具体的に、応答はブラウザなどの任意の中間ノードキャッシュ、可能なサーバ、プロキシの真ん中には、ブラウザに何かせずに、再び自分のキャッシュへの直接再び同じリソースに対する要求の次PROXY1などのリソースをキャッシュすることができますPROXY2へ。private
:すべてのコンテンツのみのクライアントは、キャッシュ・コントロールのデフォルト値をキャッシュすることができます。自身が任意のデータをキャッシュしません、プロキシは正直Serverは、データがPROXY1に戻って送信されます、サーバー - PROXY1 - - PROXY2具体的には、ブラウザのキャッシュを許可していない中間ノードを表します。再度、ブラウザの要求次のプロキシは、彼がキャッシュされたデータにフリーハンドを与えられていない状態で行うための要求を転送します。no-cache
:クライアント側のキャッシュの内容を、キャッシュバッファを使用するかどうかは協議後、決定を検証するために必要とされます。これは、前のCache-Controlの検証を行うにはキャッシュ制御を示していないが、たEtagまたはLast-Modifiedのフィールドを使用すると、バッファを制御します。なお、ノーキャッシュ名少し誤解を招きます。ノーキャッシュを設定していない後、それだけで、ブラウザのキャッシュデータを使用しているブラウザがキャッシュデータは、サーバーが親切にもデータの一貫性があったかどうか確認する必要がないという意味ではありません。no-store
:すべてのコンテンツはつまり、強制的にキャッシュを使用せずに、キャッシュが交渉を使用していない、キャッシュされませんmax-age
:最高年齢= xxxは(xxxは数値である)は、キャッシュされたコンテンツは、xxxは秒で期限切れになります表しますs-maxage(单位为s)
:のみ(例えばキャッシュCDNなど)の共有キャッシュの最大エージング、と。例えば、S-MAXAGE =コンテンツはCDNを更新した場合でも60時間、この60秒は、ブラウザが要求していないとき。MAXAGEは、通常のキャッシュのために、S-MAXAGEプロキシキャッシュのため。MAXAGEよりS-MAXAGE優先順位が高いです。S-MAXAGEがある場合、MAXAGEを切り詰めとExpiresヘッダ。
最も低い優先度の高い順は >のCache-Control - - >プラグマ有効期限
Cache-Controlの時間間隔を使用するには、失敗を使用して、時間を有効期限
キャッシュ相談
キャッシュ強い根拠は、最新のコンテンツファイルにつながる可能性があり、サーバー側のファイルが更新されているか否かに関係なく、一定の時間を超えてから、または一定の時間かどうかキャッシュは、サーバー側でロードされていないかどうかを判断するために、我々はどのようにサーバー側のコンテンツを知っていますそれが更新するように発生している?この時点では、キャッシュポリシーの協議を使用する必要があります
相談は、キャッシュを欠場キャッシュを強制的に、ブラウザがアイデンティティキャッシュサーバを運ぶために要求を送信した後、使用するかどうかを決定するプロセスは、キャッシュ識別子に応じて、サーバによってキャッシュされました
キャッシュのチェックフィールド
最終更新日
サーバーのリソースがクライアントに渡されたときに、リソースが変化します前回Last-Modified: GMT”
クライアントへのヘッダー収益の増加の形は、実体は、最終更新時刻のリソースを表します
時間が再び要求された場合には、要求パケットに情報を入れて、リソースの最終更新時刻が同じであれば、サーバに渡された時刻値、検査を行うには、サーバーをもたらすために一緒に来て、それは、リソースが変更されていないことを示し、直接リターン・304
ステータス・コードは、コンテンツが空であり、したがって転送されるデータの量を節約します。2時間の矛盾した場合、サーバーはリソースを送り返しして返す200
ステータスコードを、そして初めての場合にも同様の要求。これは、クライアントが重複したリソースを発行するだけでなく、ときにサーバーの変更、クライアントが最新のリソースを取得できることを保証しないことを保証します。304
応答は、このようにネットワーク帯域幅を節約し、通常は静的リソースよりもはるかに小さいです
転送Last-Modified
要求パケットヘッダフィールド両者の合計:
- 変更 - 開始:のLast-Modified値
示例为 If-Modified-Since: Thu, 31 Mar 2016 07:07:52 GMT
该请求首部告诉服务器如果客户端传来的最后修改时间与服务器上的一致,则直接回送304 和响应报头即可。
当前各浏览器均是使用的该请求首部来向服务器传递保存的 Last-Modified 值。
- もし非改変-以降:のLast-Modified値
该值告诉服务器,若Last-Modified没有匹配上(资源在服务端的最后更新时间改变了),则应当返回412`(Precondition Failed) 状态码给客户端。 Last-Modified 存在一定问题,如果在服务器上,一个资源被修改了,但其实际内容根本没发生改变,会因为Last-Modified时间匹配不上而返回了整个实体给客户端(即使客户端缓存里有个一模一样的资源)
ETagを
対処するために、Last-Modified
不正確な(ファイル更新時刻を変更するが、ファイルの内容が変更されていない)問題HTTP1.1
も増加しETag
(例えばMD5マークなど)固有の識別子に到達するためにリソースを計算するアルゴリズムを介して、サーバエンティティヘッダフィールドを、リソースに応答クライアントまでの時間、エンティティは、ヘッダを追加することになり“ETag: 唯一标识符”
一緒にクライアントに戻します。
クライアントが保持されますETag
フィールドを、とするとき、次の1と過去を持つサーバに次の要求。Serverは来たクライアントを比較する必要がETag
独自のサーバー上のリソースとETag
、同じ相対クライアントの条件が変更されているかどうかを判断するための優れたリソースすることができます。サーバが見つかった場合ETag
、一致は、従来のGETに直接、その後、上ではなく、 200
新しいリソースをクライアントに(もちろん新しいのETagのを含む)の形で返却パッケージ、あなたがた場合はETag
一貫している、その後、直接返す304
直接使用されているクライアントのローカルキャッシュを知らせます缶
送信ETag
要求パケット2があります。
- なし - マッチの場合:ETagの値
示例为 If-None-Match: "5d8c72a5edda8d6a:3239" 告诉服务端如果 ETag 没匹配上需要重发资源数据,否则直接回送304 和响应报头即可。 当前各浏览器均是使用的该请求首部来向服务器传递保存的 ETag 值
- なし - マッチの場合:ETagの値
告诉服务器如果没有匹配到ETag,或者收到了“*”值而当前并没有该资源实体,则应当返回412(Precondition Failed) 状态码给客户端。否则服务器直接忽略该字段
概要
キャッシュキャッシュの優先順位を交渉することを強制、強制キャッシュはキャッシュを直接使用の発効を、(有効期限とのCache-Control)場合であれば協議の力へのキャッシュエントリ(のLast-Modified /変更 - 開始とのEtag / IF-なしマッチ)ブラウザのキャッシュに保存され、その後の協議のキャッシュキャッシュを使用するかどうかを決定するために、サーバー、交渉が失敗した場合にキャッシュ、キャッシュに代わって要求の失敗、200、およびリソースのキャッシュ識別子に戻り、そして、304は効果に返され、キャッシュを使用し続けています。
ユーザーが/アクセス動作をリフレッシュ
- URI入力フィールドにして、ブックマークを介してキャリッジリターン/アクセスを入力して、トリガーのキャッシュメカニズムを話しています
- ツールバーの[F5 /更新ボタン、強力なキャッシュ裁判官が判断するためにキャッシュを協議するスキップ、最大エージング= 0を設定するブラウザをリロードする/右クリックメニューをクリックしてください
- CTL + F5、サーバーから直接リソースを引っ張って、キャッシュと強い交渉キャッシュをスキップ