HTMLキャッシュに関する知識について話しましょう

Web サイトへのアクセスが増加するにつれ、Web ページをいかに素早く読み込むかがユーザー エクスペリエンスの重要な側面になってきました。この問題を解決する有効な手段の 1 つが HTML キャッシュ技術です。この記事では、HTMLキャッシュの概念や設定方法、最適化手法について紹介します。

1. HTML キャッシュの概念

HTML キャッシュ、つまりブラウザー キャッシュとは、ブラウザー内でページ リソース (HTML、CSS、JS、その他のファイルなど) をキャッシュして処理を容易にすることを指します。次回アクセスするときは、ネットワーク リクエストを経由するのではなく、ローカル キャッシュから読み取られます。これにより、リソース要求の数が効果的に削減され、ページの読み込みが高速化され、ユーザー エクスペリエンスが向上します。

2. HTML キャッシュの設定方法

1. サーバー側の設定

サーバー側では、設定によってブラウザーがキャッシュするかどうかを制御できます。 HTTP 応答ヘッダー ページ リソース。一般的に使用される HTTP 応答ヘッダーは次のとおりです:

• Cache-Control: キャッシュの動作を制御するために使用されます。一般的な値には、max-age、no-cache、no-store などが含まれます。このうち、max-age はリソースをキャッシュできる最大時間 (秒) を示し、no-cache はキャッシュされたリソースを使用する前にクライアントがキャッシュされたデータの有効性を検証することを強制することを示し、no-store はブラウザーがキャッシュされたデータの有効性を確認することを示します。データのキャッシュは禁止されています。
• Expires: キャッシュの有効期限。リソースを再度リクエストする必要がある時期をブラウザに伝えるために使用されます。
• Last-Modified: リソースの最終変更時刻。ブラウザがキャッシュされたデータの有効性を検証するために使用されます。
• ETag: リソースの一意の識別子。ブラウザがキャッシュされたデータの有効性を検証するためにも使用されます。

2. クライアント設定

クライアント側では、次の方法で HTML キャッシュを設定できます:

• HTML メタtag: メタ タグを HTML ファイルに追加して、ページのキャッシュ ポリシーを指定します。よく使用されるメタタグは次のとおりです。

<meta http-equiv="Cache-Control" content="max-age=3600, must-revalidate">
<meta http-equiv="Expires" content="Sat, 1 Jan 2022 00:00:00 GMT">

このうち、Cache-Control と Expires の使用方法はサーバー側の設定と同じです。

• JavaScript: JavaScript コードを通じてブラウザーのキャッシュ ポリシーを変更します。例:

if( window.localStorage ){ // 支持本地存储 
  if( !localStorage.getItem('firstLoadTime') ){ // 判断是否第一次访问 
    localStorage['firstLoadTime'] = (new Date()).getTime(); 
  }else if( (new Date()).getTime() - localStorage['firstLoadTime'] > 1000 * 60 * 60 * 24 * 7 ){ // 缓存一周 
    localStorage.clear(); 
    localStorage['firstLoadTime'] = (new Date()).getTime(); 
  }
}

このコードは、ページのキャッシュ時間を 1 週間に設定します。

3. HTML キャッシュの最適化スキル

1. 静的リソースと動的リソースを分離する

静的リソース (CSS、JS、画像など) を分離する動的リソースからのリソース (HTML、PHP、ASP など) の分離は、一般的な最適化方法です。現時点では、静的リソースのキャッシュ時間を長く設定して、リクエストの数と帯域幅の消費を減らすことができます。

2. 一意のリソース ロケーター (URL) の設計

URL の設計もキャッシュの有効性に影響します。したがって、URL は次のように設計できます。

• リソースの種類に応じてディレクトリを分割します。たとえば、「/css/」、「/js/」、「/img/」を使用します。などでディレクトリを分割します。
• URL では動的パラメータの使用を避けてください。たとえば、「/index.php?name=xxx」は「/user/xxx.html」に変更できます。

3. キャッシュの有効性検証

キャッシュの有効性検証は、サーバー側の Last-Modified および ETag セットを通じて実現できます。ブラウザーのキャッシュの有効期限が切れたら、サーバーにリクエストを送信して、キャッシュされたリソースがまだ有効かどうかを確認できます。有効な場合は、キャッシュされたリソースをローカルから直接読み取ることができます。有効でない場合は、リソースを再度リクエストする必要があります。

4. 概要

HTML キャッシュ テクノロジは、ページの読み込みを高速化し、ユーザー エクスペリエンスを向上させる効果的な最適化方法です。実際の運用では、サーバー側の設定とクライアント側の設定を柔軟に使い分け、キャッシュの有効性検証やURLの設計などに注意する必要があります。

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