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>

# タグは、CSS ファイルなどの外部リソースを導入するために使用されます。タグでキャッシュ属性を設定できます。

次は例です。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 までご連絡ください。

HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！

html和css算编程语言吗Sep 21, 2022 pm 04:09 PM

不算。html是一种用来告知浏览器如何组织页面的标记语言，而CSS是一种用来表现HTML或XML等文件样式的样式设计语言；html和css不具备很强的逻辑性和流程控制功能，缺乏灵活性，且html和css不能按照人类的设计对一件工作进行重复的循环，直至得到让人类满意的答案。

web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！

总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式，希望对大家有所帮助！

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html中document是什么Jun 17, 2022 pm 04:18 PM

在html中，document是文档对象的意思，代表浏览器窗口的文档；document对象是window对象的子对象，所以可通过“window.document”属性对其进行访问，每个载入浏览器的HTML文档都会成为Document对象。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。

See all articles

ホットAIツール

ホットツール

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。