javascript先端最適化-ブラウザキャッシュ
2973 ワード
ブラウザキャッシュ機能ページのスピードを上げる サーバ圧力を軽減する ネットワーク損失を減らす ブラウザキャッシュには2つの方法があります.
1、mateラベル
2、ヘッド mateタグ制御1、content-type(文書の内容タイプ:文書の種類と文字セットを設定するためのもの)2、expires(期限:ウェブページの有効期限を設定するために使用できるもの)3、pragma(casheモード:つまりキャッシュからウェブページの内容にアクセスするかどうか)4、refsh(リフレッシュ:一定時間の自動更新または他のurlにジャンプするまで待つ)
次に有用な話をします.ブラウザはReponse header情報を通じてキャッシュを確認します.どうやってキャッシュしますか?
ヘッダ情報キャッシュの仕組みは2つあります.キャッシュ ネゴシエーションキャッシュ 先にキャッシュを強調します
コンソールのリソースローディングsizeバーでは、棚やリソースのサイズが表示されます.キャッシュであれば、直接にローカルで読み込みます.(from memory cacheはメモリキャッシュから来ます)(from disk cacheはディスクキャッシュから来ます.)
ブラウザがリソースをロードする時、まずブレーク情報がCache-CoontrolとExpiresの二つの属性を含んでいるかどうかを判定します.Expiresはhttp 1.0で、Cache-Coontrolはhttp 1.1で、バージョンから言えば、Cache-controlのほうがより強いです.
地図はjsのResponse headerの情報で、Cache-controlとExpiresを含んでいますが、字面からはExpiresが時間を設定していることが分かります.期限が切れるはずです.私達はCache-controlをもう一回当ててみます.ひと塊のフィールド、max-age=31536000、私も期限が切れると思います.
Expires:ブラウザのキャッシュ時間を設定します.時間は絶対時間です.設定された値からは日付が分かります.ブラウザがResonseを受信した時は、Expiresフィールドがあるかどうかを確認してください.キャッシュの時間が過ぎていないかを確認してください.キャッシュから取り出して、再要求します.
Cache-control:この積載値は多くなります.
max-age=xxx:キャッシュされた内容はxxx秒後に無効になります.この時間は時間間隔の相対時間です.public:すべてのコンテンツはキャッシュされます.(クライアントとプロキシはキャッシュできます.)prvate:コンテンツはプライベートキャッシュにのみキャッシュされます.(クライアントのみがキャッシュできます.プロキシはキャッシュできません.)no-cache:サーバと確認してから返信された応答が変更されたかどうか、その後この応答を使用して、後続の同じアドレスに対する要求を満たすことができます.したがって、適切な検証トークンが存在する場合、no-cacheは、キャッシュの応答を検証するために往復通信を開始し、リソースが変更されていない場合は、no-storeをダウンロードすることができます.すべてのコンテンツはキャッシュされません.またはInternet一時ファイルのmust-revalidation/proxy-revalidation:キャッシュの内容が無効になったら、要求はサーバ/プロキシに送信して再検証しなければなりません.
サービス側はキャッシュが失効したとどう判断しますか?
サービス側は、If-Maodified-SinceとIf-None-Matchの2つの属性の値でキャッシュが無効になったかどうかを判断します.
2、ネゴシエーションキャッシュ:ブラウザがキャッシュではないと判断すると、サーバに要求を送り、ネゴシエーションキャッシュであるかどうかを判断する.もしそうならば、サーバーは304 Not Modifiedに戻ります.ブラウザはキャッシュからロードします.じゃ何が協議キャッシュですか?
Last-MaodifiedとIf-Maodified Sinceフィールド:
1、ブラウザは初めてサーバに要求を送り、サーバは資源を返して、そしてレスポンスヘアドラーにLast-Maodifiedフィールドを加えて、資源の最終的な修正の時間を表します.2、ブラウザが再度このリソースを要求すると、要求ヘッダにIf-Maodified-Sinceフィールドが追加されます.この二つのフィールドが同じなら、リソースが変更されていないと説明し、304 Not Modifiedに戻り、ブラウザはキャッシュからリソースを取得する.この二つのフィールドが違ったら、リソースが修正されたということです.サーバは正常にリソースに戻ります.
ETag、If-None-Motch:
ただし、サーバー上のリソースが変更され、最終的に変更された時間が更新されていない場合は、次の二つのフィールドを引き出します.1、ブラウザは初めてサーバに要求し、サーバはリソースを返し、そしてレスポンスheaderにETagフィールドを追加する.リソース自体を表し、リソースが変化するとフィールドが変化します.2、ブラウザが再度サーバにこのリソースを要求する場合、要求ヘッドはIf-None-Motchフィールドを携帯する.この二つのフィールドが同じであれば、代表リソースは変化しません.サーバは304 Not Modifiedに戻り、ブラウザはキャッシュからロードします.二つのフィールドが異なる場合、リソースが変動していることを証明し、サーバは正常にリソースを返します.
参考:https://juejin.im/post/5a7a8e...https://juejin.im/post/59c602...
1、mateラベル
2、ヘッド
//
// GMT
//
//
次に有用な話をします.ブラウザはReponse header情報を通じてキャッシュを確認します.どうやってキャッシュしますか?
ヘッダ情報キャッシュの仕組みは2つあります.
コンソールのリソースローディングsizeバーでは、棚やリソースのサイズが表示されます.キャッシュであれば、直接にローカルで読み込みます.(from memory cacheはメモリキャッシュから来ます)(from disk cacheはディスクキャッシュから来ます.)
ブラウザがリソースをロードする時、まずブレーク情報がCache-CoontrolとExpiresの二つの属性を含んでいるかどうかを判定します.Expiresはhttp 1.0で、Cache-Coontrolはhttp 1.1で、バージョンから言えば、Cache-controlのほうがより強いです.
地図はjsのResponse headerの情報で、Cache-controlとExpiresを含んでいますが、字面からはExpiresが時間を設定していることが分かります.期限が切れるはずです.私達はCache-controlをもう一回当ててみます.ひと塊のフィールド、max-age=31536000、私も期限が切れると思います.
Expires:ブラウザのキャッシュ時間を設定します.時間は絶対時間です.設定された値からは日付が分かります.ブラウザがResonseを受信した時は、Expiresフィールドがあるかどうかを確認してください.キャッシュの時間が過ぎていないかを確認してください.キャッシュから取り出して、再要求します.
Cache-control:この積載値は多くなります.
max-age=xxx:キャッシュされた内容はxxx秒後に無効になります.この時間は時間間隔の相対時間です.public:すべてのコンテンツはキャッシュされます.(クライアントとプロキシはキャッシュできます.)prvate:コンテンツはプライベートキャッシュにのみキャッシュされます.(クライアントのみがキャッシュできます.プロキシはキャッシュできません.)no-cache:サーバと確認してから返信された応答が変更されたかどうか、その後この応答を使用して、後続の同じアドレスに対する要求を満たすことができます.したがって、適切な検証トークンが存在する場合、no-cacheは、キャッシュの応答を検証するために往復通信を開始し、リソースが変更されていない場合は、no-storeをダウンロードすることができます.すべてのコンテンツはキャッシュされません.またはInternet一時ファイルのmust-revalidation/proxy-revalidation:キャッシュの内容が無効になったら、要求はサーバ/プロキシに送信して再検証しなければなりません.
サービス側はキャッシュが失効したとどう判断しますか?
サービス側は、If-Maodified-SinceとIf-None-Matchの2つの属性の値でキャッシュが無効になったかどうかを判断します.
2、ネゴシエーションキャッシュ:ブラウザがキャッシュではないと判断すると、サーバに要求を送り、ネゴシエーションキャッシュであるかどうかを判断する.もしそうならば、サーバーは304 Not Modifiedに戻ります.ブラウザはキャッシュからロードします.じゃ何が協議キャッシュですか?
Last-MaodifiedとIf-Maodified Sinceフィールド:
1、ブラウザは初めてサーバに要求を送り、サーバは資源を返して、そしてレスポンスヘアドラーにLast-Maodifiedフィールドを加えて、資源の最終的な修正の時間を表します.2、ブラウザが再度このリソースを要求すると、要求ヘッダにIf-Maodified-Sinceフィールドが追加されます.この二つのフィールドが同じなら、リソースが変更されていないと説明し、304 Not Modifiedに戻り、ブラウザはキャッシュからリソースを取得する.この二つのフィールドが違ったら、リソースが修正されたということです.サーバは正常にリソースに戻ります.
ETag、If-None-Motch:
ただし、サーバー上のリソースが変更され、最終的に変更された時間が更新されていない場合は、次の二つのフィールドを引き出します.1、ブラウザは初めてサーバに要求し、サーバはリソースを返し、そしてレスポンスheaderにETagフィールドを追加する.リソース自体を表し、リソースが変化するとフィールドが変化します.2、ブラウザが再度サーバにこのリソースを要求する場合、要求ヘッドはIf-None-Motchフィールドを携帯する.この二つのフィールドが同じであれば、代表リソースは変化しません.サーバは304 Not Modifiedに戻り、ブラウザはキャッシュからロードします.二つのフィールドが異なる場合、リソースが変動していることを証明し、サーバは正常にリソースを返します.
参考:https://juejin.im/post/5a7a8e...https://juejin.im/post/59c602...