I.はじめに
主にフロントエンドキャッシュHTTPキャッシュやブラウザのキャッシュに分けます。前記HTTPキャッシュは、HTTPリクエストに主にサーバー・コードに設けられた送信バッファに、使用され、ブラウザのキャッシュは、主に開発されたフロントエンドJSによってフロントエンドに配置されています。
キャッシュのパフォーマンスの最適化は、シンプルかつ効率的な方法で最適化するということができます。良いキャッシュ戦略は、距離ページ要求リソースを短く、待ち時間短縮、およびキャッシュファイルを再利用することができますので、また、帯域幅を削減し、ネットワークの負荷を軽減することができますすることができます。
データ要求のために、要求は、発信ネットワーク、バックエンド処理、三段階に応答してブラウザに分割することができます。ブラウザのキャッシュは、私たちは第一及び第三のステップでパフォーマンスを最適化することができます。例えば、直接に要求を開始する、または要求を開始するが、データは、バックエンドとフロントエンド一貫に格納されている代わりに、キャッシュを使用する、データ・バックを通過した後、戻って、このように応答データを縮小する必要がありません。
第二に、キャッシュ処理分析
ブラウザがあること、サーバーの応答モードと通信している：ブラウザがHTTPリクエストを送信する - サーバーの応答を要求します。だから、結果をキャッシュするかどうかを決定するために、応答パケットの識別子キャッシュHTTPヘッダーに基づいて、要求の結果を得るために、サーバーへの要求を開始し、その結果は、ブラウザのキャッシュを要求識別子キャッシュに格納され、簡単な最初のブラウザ後次のように図のプロセスは、次のとおりです。
上記のグラフから、我々は知ることができます：
その結果、ブラウザが要求を開始するたびに、要求が最初にブラウザのキャッシュとキャッシュ識別子になります
たびに結果が返され得るために、ブラウザの要求と結果は、ブラウザのキャッシュ識別子キャッシュに格納されています
三つには、キャッシュを強制的に
強制キャッシュキャッシュのルックアップ次のようにメイン3は、ありますブラウザへの要求の結果であり、かつ、処理結果の規則に従ってキャッシュ結果に強制キャッシュをキャッシュを使用するかどうかを決定します：
キャッシュと結果①シンボルをキャッシュするには、強制キャッシュミスが存在しない以下のように、要求は、サーバーに直接（最初の開始の要求と一致）が開始されます。
キャッシュの存在と識別の結果をキャッシュし、その結果は以下に示すように、交渉のキャッシュを使用し、その後、キャッシュ・ミスを強制的に失敗している②
③キャッシュとキャッシュ識別結果が存在し、この結果が満了していない、効果に押し込まキャッシュは、図のように、直接的に結果を返します。
だから、バッファキャッシュのルールを強制的に何？
ブラウザがサーバに要求を送信すると、サーバは、のHTTPレスポンスヘッダにルールをキャッシュするHTTPパケットと一緒にブラウザフィールド、制御が強制されたキャッシュのCache-Controlと有効期限、前記キャッシュ・コントロールに返される結果と要求優先順位は終わっ有効期限。
有効期限
有効期限であるHTTP / 1.0のWebキャッシュ制御フィールド、リクエストサーバが返すの有効期限の値がキャッシュされた結果、すなわち、クライアントが少ない時間を有効期限の値以上である場合には、再度、要求を開始し、キャッシュされた結果を直接使用します。
HTTP / 1.1に、期限切れなど、異なるタイムゾーンなど、いくつかの理由（のために、そのクライアントとサーバーの時間ならば、キャッシュ制御の原理は、比較を行うために、時間のクライアントの時間を使用して、サーバーから返されたことです有効期限ので、のCache-Controlに置き換えられました;クライアントとサーバのパーティまでの時間を持っている不正確な）エラーが発生した場合、キャッシュはまったく何もない場合はキャッシュを強制的に、直接的な失敗を強制します。
Cache-Control
HTTPでは/のCache-Control、1.1は、主にページキャッシュを制御するために使用される最も重要なルール、主な値は次のとおりです。
パブリック：すべてのコンテンツがキャッシュされます（クライアントとプロキシサーバがキャッシュすることができます）
プライベート：すべてのコンテンツがキャッシュできるクライアントだけ、のCache-Controlのデフォルト値
キャッシュなし：クライアント側のキャッシュコンテンツがありますが、相談後決定を確認するためにキャッシュ・バッファを使用する必要がある場合
無店舗：すべてのコンテンツがキャッシュされません、で、強制キャッシュを使用せずに、キャッシュが交渉使用されていません
最大エージング= XXX（xxxは数値である）：キャッシュの内容をXXX秒で期限切れになります
次のように次に、私たちは、直接の例を参照してください。
上記の例とは、知ることができます。
①HTTPパケットの応答時間値が絶対値で満了します
Cache-Control最大エージング= 600用②HTTP応答パケットは、相対値であり、
キャッシュ・コントロールは、より高い優先順位の有効期限ので、キャッシュは直接のCache-Controlの値に応じて、600秒以内に再び要求を開始する意味は、結果は、力効果をバッファ、キャッシュとして使用されます。
注：のCache-Controlと比較して、サーバーのかどうか、クライアントの時間と時刻同期を決定する場合には、より良いオプションの有効期限が切れているので、存在するが、唯一のCache-Controlが発効しました。
強制キャッシュのプロセスを理解した後、我々は次のステップを考える：ブラウザのキャッシュがブラウザで有効にキャッシュを強制するかどうかを決定するどこで、どのように保存されていますか？
ここでは、要求の例をブログ、ステータスコードは、それぞれ、バッファ記憶に対応する位置を表し、ディスクキャッシュからメモリ・キャッシュから強制キャッシュ要求サイズ値を使用して、灰色の要求を表します。だから、メモリキャッシュからディスクキャッシュからと代わって何ですか？それはメモリキャッシュからそれを使用するときときは、ディスクキャッシュから使用されますか？
>ディスク - - > Serverリクエストディスク・キャッシュから、キャッシュメモリを使用してメモリキャッシュからの代表は、ブラウザがメモリのキャッシュ・シーケンスを読み込み、ハードディスクキャッシュを使って表します。
だから、読み取りキャッシュの問題と詳細な分析での外観は、ここに私のブログでは、まだ分析のための例を作ってみましょう：
ページへの最初の訪問
閉じるブログのタブ、ページを再度開きます
ページを更新
（メモリキャッシュからの）メモリキャッシュ：キャッシュメモリは二つの特徴、すなわち、速度と時間の制約があります。
（ディスクキャッシュからの）ディスクキャッシュ：直接ディスクキャッシュバッファには、ハードディスクに保存されたファイルキャッシュにI / O操作であるためには、ディスク・ファイルへの読み取りバッファのニーズを書き込んだ後、キャッシュの再解析内容、複雑なスピードを読まれますメモリキャッシュよりも遅いです。
ブラウザでは、ブラウザはJSに直接入金されますと、写真やその他のファイルの解析実行メモリキャッシュの後に、（メモリキャッシュから）メモリ・キャッシュから直接読み込む際には、単にページを更新することができ;およびCSSファイルが保存されますハードディスクファイルなので、ページをレンダリングするたびにハードディスクから（ディスクキャッシュから）キャッシュを読み込む必要があります。
四回の協議キャッシュ
相談は、キャッシュミスにキャッシュを強制的にされた後、ブラウザは、キャッシュサーバの識別は、主に以下の2つの状況で、に従ってキャッシュ処理を使用するかどうかを決定キャリーアイデンティティキャッシュサーバに要求を送信します。
力に①交渉キャッシュエントリ、次のように、304に戻ります
②交渉キャッシュの無効化、および以下の200件の結果を要求
最終変性/ IF修飾-のでたEtag / IF-なしマッチ：同様に、識別ネゴシエーション・キャッシュは、結果がそれぞれブラウザ、制御ネゴシエーション・キャッシュ・フィールドに戻すとともにHTTPヘッダの応答メッセージと要求もあります前記のEtag / IF-なしマッチよりも高い優先度のLast-Modified /変更した場合は-ので。
Last-Modified /変更 - 開始
要求に対するとき、サーバ応答のLast-Modified、サーバーは次のようにリソースファイルは、最後に変更された返されます。
場合 - 変更 - ので、それは再び要求を開始したクライアントで、このフィールドの値によって、最後のリクエストによって返されたのLast-Modified値を運ぶと、サーバーは、最後の要求リソースの復帰の最終更新時間だっ伝えます。変更された場合-のでリソースとは対照的に、サーバーの最終更新時間を行うには、サーバーのリソースは時間がより大きい最後に変更された場合は、要求、場合 - 変更 - のでフィールド含有する第一発見要求を受けたサーバは、フィールドの値に基づいて行われます場合 - 変更 - ので、リソースへの復帰のフィールド値、ステータスコード200、それ以外の場合は、リソースの代わりに何の更新を304を返していないが、キャッシュは次のように、ファイルを引き続き使用することができます。
たEtag / IF-なしマッチ
ETagは、次のようにリクエストサーバへの応答は、（サーバによって生成された）現在のリソースファイルの一意の識別子を返しています。
なし-マッチした場合、クライアントは再び要求を開始していない、それはこのフィールドの値によって、最後のリクエストによって返された一意の識別子のEtag値が一意にリソースの最後の値を返すように要求を特定のサーバに伝え運びます。サーバが要求を受信すると、要求は、IF-なしマッチヘッダを含むことが見出された場合、なしマッチ、フィールドの値に基づいて、サーバのEtagリソースの値と比較して行われる、同じでは、リソースの代わりには、更新304を返しません、キャッシュファイルを継続して使用する。次のようにリソースファイルへの復帰と矛盾は、ステータスコードは、200です。
注：のEtag / IF-なしマッチよりも高い優先度のLast-Modified /変更した場合は-ので、同時に唯一のEtag / IF-なし - マッチ効果があります。交渉・キャッシュの場合、リフレッシュ無効なキャッシュを行うことができます強制するには、Ctrl + F5を使用しています。しかし、期限が切れていない間に強いキャッシュのために、あなたは新しい要求を開始するために、リソースパスを更新する必要があります（別のリソースの同等のパスを変更するには、これはフロントエンドエンジニアリングスキルに共通です）。
概要
協議の力へのキャッシュエントリ（のLast-Modified /変更 - 開始とのEtag / IF-なしマッチ）場合、強制キャッシュは（有効期限とのCache-Control）場合、キャッシュを直接使用するの発効をキャッシュキャッシュの優先順位を交渉することを余儀なく相談キャッシュサーバは交渉が、キャッシュに代わって要求の失敗を失敗した場合、キャッシュ、キャッシュを使用して、要求の結果を取得した後、ブラウザのキャッシュに保存されているかどうかを決定するために、キャッシュを使用し続け、304が有効に返され、メインプロセスは、次のされています。
ファイブブラウザのキャッシュ
5.1小さなローカルストレージ容量
要求された場合、クッキーは、主にユーザー情報を格納するため、クッキーの内容は自動的にサーバに送信されてもよいです。
ユーザーがブラウザのキャッシュデータをクリアするまでのlocalStorageデータは、ブラウザ内に保持されます。
タブ付きその他のlocalStorageを持つプロパティのsessionStorageが、そのライフサイクルのライフサイクルタブが閉じているとき、のsessionStorageもクリアします。
5.2大規模なローカルストレージ容量
WebSqlとIndexDBは主にフロントページに、このようなオンラインエディタ、Webブラウザやメールなどの大容量のストレージ要件を、使用していました。
そして、5.3からキャッシュ
そしてキャッシュから、またBFCache、歴史のレンダリングページの速度を改善するための戦略上の前方のブラウザやバックボタンとして知られています。ユーザーがでbfcacheに、現在のページのブラウザのDOMの状態の保存、新しいページに移動するときの戦略の具体的な性能があり、ユーザーがページが時間ネットワーク要求を保存するにbfcacheから直接ロードされた戻るボタンをクリックしたとき。
著者：Tmaszの
リンクします。https：//www.jianshu.com/p/256d0873c398
出典：ジェーンの本が
著者によって著作権で保護されています。著者は認可商業転載してください接触、非商用の転載は、ソースを明記してください。