HTML設定キャッシュ

Web アプリケーションの開発に伴い、ページに含まれるデータやファイルがますます増えています。再利用される一部のデータやファイルについては、ブラウザのキャッシュ メカニズムによりネットワーク リクエストが効果的に削減され、ユーザーがページにアクセスする速度が向上します。 HTMLでキャッシュを設定するのは簡単で効果的な方法ですので、HTMLでキャッシュを設定する方法を紹介します。

1. キャッシュを設定する理由は何ですか?

Web を閲覧すると、ページが読み込まれるたびに、HTML、CSS、JavaScript、その他のファイル、画像、ビデオ、その他のリソースのリクエストを含むネットワーク リクエストがトリガーされます。多くの場合、ネットワーク リクエストに必要な時間がページの読み込み速度のボトルネックになるため、ページの読み込み速度を向上させるにはリクエストの数を減らすことが重要です。

現時点では、ブラウザのキャッシュ メカニズムを利用する必要があります。ユーザーが初めてページをリクエストすると、ブラウザはページ内のリソース (CSS、JavaScript、その他のファイルなど) をキャッシュします。ユーザーがそのページに再度アクセスすると、ブラウザは新しいリクエストを開始することなく、これらのリソースをキャッシュから直接取得できます。これにより、サーバーの負荷が軽減されるだけでなく、ユーザーのアクセス速度も大幅に向上します。

2. HTML でキャッシュを設定するにはどうすればよいですか?

HTML では、HTTP ヘッダーを使用してキャッシュの使用方法を制御できます。一般的に使用される HTTP ヘッダーには、Expires と Cache-Control が含まれます。

1. Expires

Expires は、ブラウザがリソースを有効と見なすまでの日付または時刻を指定します。この日付または時刻以降にリソースに再度アクセスすると、ブラウザはリソースを再リクエストします。

サーバー側では、応答ヘッダーに Expires を設定することでブラウザーのキャッシュを実現できます。たとえば、Expires を今から 30 日後に設定します。

Expires: Fri, 16 Jul 2021 20:00:00 GMT

2. Cache-Control

Cache-Control は、キャッシュを制御する最新の HTTP ヘッダーの 1 つです。 Cache-Control を通じて、キャッシュ戦略を細かく制御できます。

一般的に使用されるキャッシュ制御属性は次のとおりです:

• public: キャッシュはすべてのユーザー (プロキシ サーバーを含む) によってキャッシュ可能;
• private: キャッシュは可能端末によってのみキャッシュされる ユーザー キャッシュ、中間プロキシ サーバーはキャッシュできません;
• max-age: キャッシュの有効期限を秒単位で設定します。

たとえば、Cache-Control を public に設定し、max-age を 1 週間後の時間に設定します。

Cache-Control: public, max-age=604800

3. ETag

ETagキャッシュを制御するもう 1 つのメカニズムであり、応答の内容に基づいて生成される一意の識別子です。ブラウザがリソースをリクエストすると、サーバーはリソースの ETag 値をブラウザに返します。次回リソースがリクエストされると、ブラウザは If-None-Match を通じて以前の ETag 値をサーバーに送信し、リソースが変更されたかどうかを尋ねます。

リソースが変更されていない場合、サーバーは 304 Not Modified 応答を返し、応答ヘッダーに ETag を含めます。リソースが変更されている場合、サーバーは新しいリソースを返し、ETag を更新します。

サーバー側では、応答ヘッダーに ETag を設定することでブラウザーのキャッシュを実現できます。例:

ETag: "1234"

3. キャッシュ設定時の注意事項

キャッシュを使用する場合は、以下の点にも注意する必要があります。

1. プライベート情報のキャッシュを避ける

キャッシュにパブリック属性を設定すると、ブラウザのキャッシュやプロキシ サーバーのキャッシュを含む、キャッシュされたコンテンツにすべてのユーザーがアクセスできます。したがって、個人情報 (ユーザーのパスワードなど) をキャッシュしないようにする必要があります。

2. キャッシュを更新するときは、強制更新を考慮する必要があります。

ページのコンテンツが変更されたときは、ユーザーのブラウザのキャッシュを更新する必要があります。このとき、Cache-Control の max-age 属性を使用して、キャッシュの有効時間を秒単位で設定できます。

たとえば、Cache-Control を max-age=0 に設定すると、ブラウザにリソースの再リクエストとキャッシュの更新を強制できます。

Cache-Control: max-age=0

3. リソースが異なれば、キャッシュ戦略も異なる必要があります。 set

ほとんどの静的リソース (画像、CSS、JS など) では、操作効率を向上させるために max-age をより長い時間に設定できます。頻繁に変更される一部の動的リソースの場合、ETag などのメカニズムを使用して、リソースが要求されるたびに確実に更新されるようにする必要があります。

概要:

HTML でのキャッシュの設定は、ページのパフォーマンスを向上させる一般的な方法の 1 つです。 Expires、Cache-Control、ETag などの HTTP ヘッダーを設定することで、ブラウザのキャッシュ メカニズムを実装し、ユーザーのアクセス速度を向上させることができます。キャッシュを設定する場合、最良の結果を得るには、キャッシュの詳細設定とさまざまなリソースのさまざまなキャッシュ戦略に注意を払う必要があります。

以上がHTML設定キャッシュの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。