HTMLでキャッシュを設定する3つの方法とは何ですか-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLでキャッシュを設定する3つの方法とは何ですか

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Feb 22, 2024 pm 10:57 PM

html キャッシュ方法設定キーと値のペア sessionstorage

HTMLでキャッシュを設定する3つの方法とは何ですか

HTML でキャッシュを設定する 3 つの方法は何ですか? Web開発では、ユーザーのアクセス速度の向上やサーバーの負荷を軽減するために、キャッシュを設定することでWebページの読み込み時間を短縮できます。次に、一般的に使用される 3 つの HTML キャッシュメソッドを詳しく紹介し、具体的なコード例を示します。

方法 1: HTTP 応答ヘッダーを使用してキャッシュを設定する

HTTP 応答ヘッダーの「Cache-Control」と「Expires」は、キャッシュを設定するためによく使用される 2 つの属性です。これら 2 つのプロパティを設定すると、Web コンテンツのブラウザーのキャッシュ動作を制御できます。

Cache-Control 属性

Cache-Control 属性は HTTP 応答ヘッダーに設定され、ブラウザーが Web ページのコンテンツをキャッシュする方法を指定するために使用されます。複数の値を持つことができ、一般的に使用される値は次のとおりです。

public: パブリックキャッシュを許可します。つまり、すべてのキャッシュサーバーとブラウザが Web ページをキャッシュできます。
private: プライベートキャッシュのみが許可されます。つまり、ブラウザーのみが Web ページをキャッシュできます。
no-store: キャッシュを無効にすると、ブラウザは Web ページのコンテンツをキャッシュしません。
max-age: キャッシュの最大有効時間を秒単位で設定します。

次は、Cache-Control を public に、max-age を 3600 秒 (1 時間) に設定する例です:

HTTP/1.1 200 OK
Cache-Control: public, max-age=3600

ログイン後にコピー

Expires 属性

Expires 属性は、キャッシュの有効期限を指定するために使用される絶対時間値です。この時刻は GMT 形式の日付文字列で、この時刻の後にキャッシュが期限切れになることを示します。

次は、有効期限を 2022 年 1 月 1 日に設定する例です:

HTTP/1.1 200 OK
Expires: Sat, 01 Jan 2022 00:00:00 GMT

ログイン後にコピー

方法 2: HTML タグを使用してキャッシュを設定する

HTTP 経由でキャッシュ属性を設定することに加えて、応答ヘッダーさらに、HTML タグを使用してキャッシュを設定することもできます。一般的に使用されるタグには、やなどがあります。

タグを使用する

タグを Web ページのタグに配置して、キャッシュ属性を設定できます。

次は、Cache-Control を public に、max-age を 3600 秒に設定する例です:

<html>
<head>
<meta http-equiv="Cache-Control" content="public, max-age=3600">
</head>
<body>
<!-- 网页内容 -->
</body>
</html>

ログイン後にコピー

次は例です。Cache-Control を public に、max-age を 3600 秒に設定します。

<link rel="stylesheet" href="styles.css" type="text/css" 
      http-equiv="Cache-Control" content="public, max-age=3600">

ログイン後にコピー

方法 3: JavaScript を使用してキャッシュを設定します

さらにHTTP 応答ヘッダーの使用 HTML タグを使用してキャッシュ属性を設定することに加えて、JavaScript を使用してキャッシュを設定することもできます。

ブラウザの localStorage オブジェクトまたは sessionStorage オブジェクトを使用すると、データを保存および読み取り、キャッシュの効果を実現できます。

次は、localStorage を使用してキーと値のペアを設定し、そこから値を取得する例です。

<script>
// 设置缓存
localStorage.setItem("key", "value");

// 获取缓存
var value = localStorage.getItem("key");
console.log(value); // 输出"value"
</script>

ログイン後にコピー

要約

キャッシュを設定することで、効果的に次のことができます。 Web ページの読み込み速度とユーザーエクスペリエンスを向上させます。 HTML では、HTML タグと JavaScript を使用して HTTP 応答ヘッダーを設定することでキャッシュを実装できます。適切な方法と属性を選択することで、さまざまなシナリオやニーズに応じてキャッシュ戦略をカスタマイズできます。

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。