HTML ファイルはキャッシュされますか?-htmlチュートリアル-php.cn

HTML ファイルはキャッシュされますか?

WBOY

リリース： 2024-02-19 13:51:22

オリジナル

711 人が閲覧しました

HTML ファイルはキャッシュされますか?

タイトル: HTML ファイルのキャッシュメカニズムとコード例

はじめに: Web ページを作成するときに、ブラウザーのキャッシュの問題がよく発生します。この記事では、HTML ファイルのキャッシュメカニズムを詳細に紹介し、読者がこのメカニズムをよりよく理解して適用できるように、いくつかの具体的なコード例を示します。

1. ブラウザのキャッシュ原理
ブラウザでは、Web ページがアクセスされるたびに、まずキャッシュに Web ページのコピーがあるかどうかを確認します。存在する場合、Web ページのコンテンツはキャッシュから直接取得されます。これがブラウザーキャッシュの基本原理です。ブラウザーキャッシュメカニズムの利点は、Web ページの読み込み速度を向上させ、ネットワークリクエストを削減し、帯域幅を節約できることです。

2. HTML キャッシュ方法
HTML ファイルのキャッシュは、次の 2 つの方法で制御できます:

有効期限とキャッシュ制御
追加によるHTTP 応答ヘッダーの Expires フィールドと Cache-Control フィールドにより、ブラウザがファイルをキャッシュする時間を制御できます。具体的なサンプルコードは次のとおりです。
```
HTTP/1.1 200 OK
Content-Type: text/html
Cache-Control: max-age=3600
Expires: Wed, 04 Aug 2022 08:00:00 GMT

<!DOCTYPE html>
<html>
 
</html>
```
ログイン後にコピー
上記のサンプルコードでは、Cache-Control フィールドに最大キャッシュ時間 3600 秒 (1 時間) が指定され、Expires フィールドにはキャッシュの有効期限が次のように指定されています。 2022年8月4日、午前8時。
Last-Modified および If-Modified-since
HTTP 応答ヘッダーに Last-Modified フィールドを追加して、ファイルの最終変更時刻を示します。ブラウザがファイルをキャッシュした後、次回ファイルをリクエストするときに If-Modified-Since フィールドを追加し、最後にキャッシュされたファイルの最終変更時刻をサーバーに送信します。サーバーは、ファイルが更新されたかどうかを判断します。今回は。ファイルが更新されていない場合は、304 Not Modified 応答が返され、ブラウザはキャッシュされたファイルを引き続き使用します。具体的なサンプルコードは次のとおりです。
```
HTTP/1.1 200 OK
Content-Type: text/html
Last-Modified: Mon, 01 Aug 2022 12:00:00 GMT

<!DOCTYPE html>
<html>
 
</html>
```
ログイン後にコピー
上記のサンプルコードでは、Last-Modified フィールドにファイルの最終変更時刻が 2022 年 8 月 1 日 12:00 として指定されています。

3. キャッシュ制御戦略
実際のニーズに応じて、ファイルの内容やその他の条件に基づいてさまざまなキャッシュ戦略を策定し、ブラウザーのキャッシュをより適切に制御できます。

静的ファイルのキャッシュ
頻繁に変更されない静的ファイルの場合、ブラウザがファイルを永続的にキャッシュしてサーバーへのリクエストを減らすことができるように、キャッシュ時間を長く設定できます。たとえば、CSS、JavaScript、画像などの静的ファイルの場合、キャッシュ時間を 1 年に設定できます。サンプルコードは次のとおりです。
```
HTTP/1.1 200 OK
Content-Type: text/css
Cache-Control: max-age=31536000

/* CSS文件内容 */
```
ログイン後にコピー
動的ファイルキャッシュ
頻繁に変更される動的ファイルの場合、ブラウザが確実にファイルを取得できるように、キャッシュ時間を短く制御できます。最新のファイルをタイムリーに提供します。たとえば、動的に生成された HTML ファイルはキャッシュフィールドを設定できないため、ブラウザは毎回最新バージョンを要求できます。サンプルコードは次のとおりです。
```
HTTP/1.1 200 OK
Content-Type: text/html
Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

<!DOCTYPE html>
<html>
 
</html>
```
ログイン後にコピー
バージョン管理キャッシュ
ファイル名または URL にバージョン番号またはタイムスタンプを追加することで、ファイルが更新されたときにファイル名を変更しないようにします。 . ブラウザに新しいファイルであると認識させ、ファイルをリロードします。サンプルコードは次のとおりです。
```
<link rel="stylesheet" href="/static/style.css?v=1.0">
<script src="/static/script.js?t=1627836018"></script>
```
ログイン後にコピー

4. 概要
HTML ファイルのキャッシュは、HTTP 応答ヘッダーに対応するフィールドを設定することによって実現されます。キャッシュ時間とポリシーを適切に制御することで、Web ページの読み込み速度とユーザーエクスペリエンスを向上させることができます。実際の開発では、ファイルの内容と特性に基づいて、適切なキャッシュ方法と戦略が選択されます。この記事で提供されているコード例が、読者の HTML キャッシュメカニズムの理解と使用に役立つことを願っています。

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