ホームページ > ウェブフロントエンド > jsチュートリアル > ブラウザーのキャッシュ戦略の詳細な紹介 (画像とテキスト)

ブラウザーのキャッシュ戦略の詳細な紹介 (画像とテキスト)

不言
リリース: 2019-04-08 10:06:53
転載
2972 人が閲覧しました

この記事では、ブラウザのキャッシュ戦略について詳しく (写真とテキストで) 紹介します。一定の参考価値があります。困っている友人は参考にしてください。お役に立てれば幸いです。

サイトのアクセス速度を向上させるために、キャッシュを使用して最適化します。キャッシュは主に強力なキャッシュとネゴシエーション キャッシュに分けられます。

ネゴシエーションキャッシュ

は主にlast-modifiedとetagに分かれています。以下では、主にコードの変更を使用して、各キャッシュの違いを示します。まずネゴシエーション キャッシュについて説明しましょう。 last-modified はファイルの変更日を表し、ファイルが変更されている場合はファイルを再取得する必要があります。 last-modified は、ファイルが変更された後のサーバー時間に基づいて生成されます。

屏幕快照 2019-04-03 下午9.56.29.png

#ファイルを変更すると、再度取得され、ステータスは 200


## になります。 屏幕快照 2019-04-06 下午3.06.33.png 再度更新すると 304 が返され、キャッシュがすでに最新であり更新する必要がないことを示します。

リクエストでは、関連ファイルの変更時刻 (If-Modified-Since) が尋ねられます


Request


ブラウザーのキャッシュ戦略の詳細な紹介 (画像とテキスト)

Response


屏幕快照 2019-04-06 下午3.07.44.png#ETag:

は Web リソースです関連トークンに関連付けることができます。

ファイルが置き換えられると、一意の etag が生成されます。

#置換前のファイル


request (1).png##置換後のファイル


PS: 負荷分散に複数のサーバーが使用されている場合、ETag の不一致の問題が発生します。 Apache のデフォルトの ETag 値は、ファイルのインデックス ノード (Inode)、サイズ (Size)、および最終変更時刻 (MTime) によって常に決定されます。Inode屏幕快照 2019-04-06 下午3.20.11.pngStrong Cache## を削除するだけで済みます。

#強力なキャッシュは、ネゴシエートされたキャッシュよりも徹底的です。強力なキャッシュでは、ブラウザはサーバーへのリクエストを開始しません。

強力なキャッシュ:
主に有効期限とキャッシュ制御に分かれます

Expires: 存在時間を示し、クライアントがこれより前に進むことを許可しますtime の確認 (リクエストの実行) は、max-age と同じ効果があります。ただし、同時に存在する場合は、Cache-Control の max-age によって上書きされます。形式: 有効期限: 時刻の後に時刻または日付が続きます。キャッシュはこの時刻を過ぎると期限切れになります。つまり、ブラウザはリクエストを送信する前に、今回の時間が無効かどうかをチェックし、無効であればリクエストを再送信します。

Apache Expires_mod を有効にすると、ブラウザは最初のリクエストの後にリソースをキャッシュします。


Cache-Control

屏幕快照 2019-04-06 下午3.49.38.pngCache-Control は、プロキシと UA がどのようなキャッシュ戦略をとるべきかを示すために HTTP 応答ヘッダーで使用されます。使用。 。例:

no-cache は、この応答を後続のリクエストに直接使用できない (サーバーへの検証なし) ことを意味します。
no-store は、キャッシュが禁止されていることを意味します (キャッシュを使用してはなりません)。後続のリクエストに使用されます) 不揮発性メディアに保存され、利用可能な場合は削除を試み、機密情報に使用されます)

    public は誰でもキャッシュできます。
  • private は UA のみキャッシュ可能です
  • cache-control の max-age を最長のキャッシュ時間として設定します。この間、キャッシュが使用されます。


#no-cache に設定すると、キャッシュは実行されません。

屏幕快照 2019-04-06 下午4.12.30.png

余談


Apacheを使用したブラウザキャッシュのテスト中に見つかりました。キャッシュ制御を設定しないと、ブラウザーは独自の状況に応じて関連するキャッシュを選択します。これはここで確認できます。サーバー構成プロセス中に、キャッシュ情報を構成していないのに、ブラウザーにはキャッシュされたリソースがあることに気付いても驚かないでください。 屏幕快照 2019-04-06 下午4.17.44.png

【関連する推奨事項:

JavaScript ビデオ チュートリアル

]

以上がブラウザーのキャッシュ戦略の詳細な紹介 (画像とテキスト)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート