ブラウザのキャッシュ機構のフロントエンド

ロングはどのようなブラウザのキャッシュメカニズムを整理したかった、と私たちは何時間、実際に怠惰な友人(* ^▽^ *)を持っていない、あなたが知っている、人々は(「^ `これはただの偽の神偉大な神のOである、怠惰です)O、例外ではありません。

今日、より多くの珍しいレジャー、またはそれをコーミング、成功した人間の経験を学び、良い思い出として悪い書かれて、それが満たさ多分インタビュー

フロントエンドの開発では、パフォーマンスは永遠のテーマである、唯一のより良い、何の最高はありません。サイトのパフォーマンスを分析ストレート、すなわち反応速度肉眼ページに、良いか悪いか、キャッシュを使用する方法があり、キャッシュポリシーは、ページ要求の時間を短縮するために良いこと、待ち時間を短縮し、ウェブを再利用することができ、また減らすことができて帯域幅とネットワークの負荷を軽減。

 1:なぜ我々は、キャッシュが必要なのでしょうか?

A:キャッシュは、ユーザーの待ち時間を短縮し、ユーザーエクスペリエンスを向上させることができます

B:ネットワーク帯域幅の消費を削減

C:サーバーの負荷を減らすために

注:キャッシュの不適切な使用は、また、「ダーティデータか」の問題を引き起こす可能性があります

2:一般的なキャッシュタイプ

強力なキャッシュ -

資源の有効期限を示すために、サーバー側の設定を有効期限、欠点、一貫性のない時間のクライアントとサーバーの時間があるでしょう。

Cache-Control:maxの年齢は秒単位で、キャッシュリソースの最大のライフサイクルを示し、

だから、のCache-Controlと組み合わせて使用​​したExpires、一般的に大規模なサイトに適しています

キャッシュの交渉 -

最終更新:サーバーの応答とリソースのキャッシュ値は、返される最後の時間

もし-以来修飾:リソースが要求中に2回変更されているかどうかを判断するために2時間を比較することにより、そうでない場合、キャッシュヒットを参照してください

たEtag:一意に表されるリソースのコンテンツ、つまりリソー​​スを識別するメッセージダイジェスト

リソースは2のEtag内のリソースのための現在の要求と一致しているかどうかを判断するためにIf-None-Matchヘッダ中のサーバー要求を比較することにより、変更されています:If-なしマッチ

3:フロー図キャッシュ:

 

 

アイコンが解決します

A:ブラウザが最初に有効である(のCache-Controlまたは有効期限)の強力なキャッシュの種類を検出します。直接ローカルブラウザのキャッシュリソースを打撃を受けます

B:ミス。リクエストヘッダに基づいて、サーバーはヘッダーがセカンダリHTTP認証、ヒットとして知られているこのリソース・キャッシュ・ヒット協議を、検証要求、サーバーは要求を返しますが、リソースを返しますが、ブラウザのキャッシュから直接にクライアントを直接伝えるために

注意:

要求が発生しません1.強力なキャッシュは、キャッシュサーバー要求の協議があります

交渉のキャッシュは、サーバーリソースをミス2.クライアントに送信されます

ページを更新3.F5、キャッシュが強いスキップします

4.Ctrl + F5は、キャッシュと強い交渉キャッシュをスキップし、ページを更新します

状況はキャッシュしません

クッキーHTTPS POSTリクエスト認証情報取得応じて要求ヘッダーのCache-Control:キャッシュなし、 MAX-年齢= 0

6.ストーリーの真実

全体のコンセプトは、博覧会を行った上で、画像が十分ではありません、我々はについてのいくつかの鮮やかな物語を理解する必要があります。

ストーリー:のLast-Modified

それは最終-変更された場合こんにちは、私はjartto.min.jsにこの文書を必要とする、::ブラウザGMT金2019年2月15日19時57分31秒後に変更され、私を送ってください。

ファイルをチェック修正サーバ)

サーバー:ああ、この文書は、その時点以降に変更されていませんが、あなたはすでに最新バージョンを持っています。

ブラウザ:今、私は、ユーザーに表示されます。

ストーリー2:ETagを

ブラウザ:こんにちは、私は何の不一致が3c61f-1c1-2aecb436この文字列が存在しない、この文書をjartto.css必要

ETagをチェックするサーバー...)

サーバー:ねえ、ここではそれが3c61f-1c1-2aecb436私のバージョンでは、最新のバージョンを持っています

ブラウザ:さて、あなたはローカルキャッシュを使用することができます

交渉キャッシュをより明確に理解するかどうかは、これらの2つの物語を読んだ後。確かに非常に画像付き

参考リンク:

https://www.toutiao.com/i6719737927439483400/?tt_from=weixin&utm_campaign=client_share&wxshare_count=1×tamp=1568456352&app=news_article&utm_source=weixin&utm_medium=toutiao_ios&req_id=201909141819110100140470141C9477FF&group_id=6719737927439483400 

 

おすすめ

転載: www.cnblogs.com/ajaxkong/p/11498918.html