ブラウザは関連するHTTPヘッダーをキャッシュし、HTTPリクエストの数を最小限に抑えます。

最近、Yahoo の 34 の黄金律を読み、ウェブサイトのパフォーマンスを最適化する方法を学びました。その 1 つは、「ファイルヘッダーに Expires または Cache-Control を指定する」です。具体的には、静的コンテンツの場合は、ファイルヘッダーの有効期限の Expires 値を「期限切れなし」に設定し、動的コンテンツの場合は、適切な Cache-Control ファイルヘッダーを使用して、ブラウザーが条件付きリクエストを行えるようにします。

これは、Yahoo の 34 ポイントのうち最初のポイント、つまり http リクエストの数を最小限に抑えることに関連します (Yahoo の 34 ポイントの多くは、http リクエストの削減を目的としています)。結局のところ、ダウンロードする必要のあるリソースが多すぎると、新しい http リンクの追加にかかる時間を無視することはできません。したがって、キャッシュテクノロジを使用して Web サイトのパフォーマンスを最適化し、不要な HTTP リクエストを回避することができます。ブラウザ関連のキャッシュ技術とキャッシュ関連の HTTP ヘッダーを整理するのはちょうど良いことです。

1.有効期限:

HTTP ヘッダーの Expires 属性は、HTTP キャッシュを制御する基本的な手段であり、ブラウザにキャッシュを保存する期間を指示します。この時間が経過すると、キャッシュは元のサーバーにリクエストを送信し、ドキュメントが変更されたかどうかを確認します。静的な画像ファイルなどを設定するのに適しており、更新間隔を一定に設定するなど、定期的に変更されるWebページを制御する場合にも便利です。Expiresファイルヘッダーを使用する場合、ページコンテンツが変更されたときにコンテンツファイル名を変更する必要があります。たとえば、Yahoo では、コンテンツファイル名に yahoo_2.0.6.js などのバージョン番号を追加して、自動的に更新できるようにするという手順をよく使用します。

有効期限の使用: Apache サーバーを使用している場合は、ExpiresDefault を使用して、現在の日付を基準とした有効期限を設定できます。mod_expires を使用して、httpd.conf または .htaccess に追加します。

コードをコピー

コードは次のとおりです。

<FilesMatch "\\.(ico|gif|jpg|html)$">ExpiresDefault "アクセス期間プラス 10 年"</FileMatch>

2.キャッシュ制御

各メッセージ内の指示の意味は次のとおりです。

1. Public は、応答が任意のキャッシュにキャッシュできることを示します。
2.プライベートは、単一ユーザーに対する応答メッセージの全体または一部を共有キャッシュで処理できないことを示します。これにより、サーバーは、この応答メッセージが他のユーザーのリクエストに対して有効になることなく、現在のユーザーに対する応答メッセージの一部のみを記述できるようになります。
3.no-cache は、要求または応答メッセージをキャッシュできないことを示します。
4.no-store は、重要な情報が誤って公開されるのを防ぐために使用されます。これをリクエストメッセージで送信すると、リクエストメッセージと応答メッセージの両方でキャッシュが使用されなくなります。
5.max-age は、クライアントが指定された時間 (秒単位) を超えない有効期間の応答を受信できることを示します。
6.min-fresh は、クライアントが現在の時刻に指定された時間を加えた時間よりも短い応答時間の応答を受信できることを示します。
7. max-stale は、クライアントがタイムアウト期間を超えて応答メッセージを受信できることを示します。 max-stale メッセージ値を指定すると、クライアントは指定されたタイムアウト値を超える応答メッセージを受信できます。

例：

一般的に言えば、このような静的ファイルは期限切れになることはありません。このキャッシュに本当に期限を追加したいのであれば、10,000年が望ましいです。

つまり、「Cache-Control: max-age = 315360000000」

3. 最終更新日/それ以降の更新日
質疑応答モデルでは、システムを更新したかどうかを尋ね、それに答えます。非常にわかりやすいです。
4. ETagを構成する
エンティティタグ (ETags) は、Web サーバーとブラウザーがブラウザーキャッシュ内のコンテンツがサーバー上の元のコンテンツと一致するかどうかを判断するために使用するメカニズムです (「エンティティ」とは、画像、スクリプト、スタイルシートなどを含む、いわゆる「コンテンツ」のことです)。 ETag を追加すると、最終更新日を使用するよりも柔軟なエンティティ検証メカニズムが提供されます。 Etag は、コンテンツのバージョン番号を識別する一意の文字列です。唯一の形式制限は、二重引用符で囲む必要があることです。オリジンサーバーは、ETag ファイルヘッダーを含む応答を通じてページコンテンツの ETag を指定します。例えば：

HTTP/1.1 200 OK

最終更新日: 2006 年 12 月 12 日 (火) 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
コンテンツの長さ: 12195
その後、ブラウザがファイルを検証する必要がある場合、If-None-Match ヘッダーを使用して ETag を元のサーバーに返します。この例では、ETag が一致すると 304 ステータスコードが返され、応答が 12,195 バイト節約されます。

GET /i/yahoo.gif HTTP/1.1
ホスト: us.yimg.com
変更日時: 2006 年 12 月 12 日火曜日 03:03:59 GMT
一致しない場合: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 変更されていません

上記のキャッシュメカニズムの優先順位に関して、インターネット上で次のような記述を見つけました。

キャッシュなし>有効期限>最終更新

つまり、最初のものが最も重要であり、最初のものが有効になると、後者は基本的に無効になります。

<<: MySQLからElasticsearchにデータを同期する方法の詳細な説明

>>: HTMLのセマンティクスといくつかの簡単な最適化についての簡単な説明