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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7646
15
1392
52
91
11
34
152
vue.js文字列をオブジェクトに変換する方法は何ですか？
Apr 07, 2025 pm 09:18 PM
json.parse（）stringにオブジェクトを使用することは、最も安全で効率的です。文字列がJSON仕様に準拠していることを確認し、一般的なエラーを回避します。 Try ... CATCHを使用して例外を処理して、コードの堅牢性を向上させます。セキュリティリスクがあるeval（）メソッドの使用は避けてください。巨大なJSONの弦の場合、パフォーマンスを最適化するために、チャンクされた解析または非同期解析を考慮することができます。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上
Apr 09, 2025 am 12:11 AM
ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1）JSXはHTMLを埋め込み、開発をより直感的にします。 2）仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3）保守性を向上させるコンポーネントベースの管理UI。 4）国家管理とイベント処理は、インタラクティブ性を高めます。
H5ページの生産にデータストレージを実装する方法
Apr 05, 2025 pm 11:57 PM
H5ページデータストレージは、ページがデータを保存し、更新後の健忘を避けるためのさまざまなオプションを提供します。一般的な方法には、LocalStorage：重要なデータと永続的なデータの保存に適した、文字列データを永続的に保存します。 SessionStorage：セッション中に文字列データを一時的に保存します。これは、長い間保存する必要のないショッピングカート製品やその他のデータを保存するのに適しています。 indexedDB：大量の構造化データを保存できますが、APIは複雑です。データ形式は文字列に統合され、JSONで複雑なデータを変換する必要があります。同時に、データセキュリティ、エラー処理、マルチページの同期に注意してください。
![[ブラウザ]タブを閉じることと、JavaScriptを使用してブラウザ全体を閉じることを区別する方法は？](https://img.php.cn/upload/article/001/246/273/174338713695338.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
[ブラウザ]タブを閉じることと、JavaScriptを使用してブラウザ全体を閉じることを区別する方法は？
Apr 04, 2025 pm 10:21 PM
ブラウザのJavaScriptを使用して、タブを閉じることとブラウザ全体を区別する方法は？ブラウザの毎日の使用中、ユーザーは...
vue.jsのストリングをオブジェクトに変換するためにどのような方法が使用されますか？
Apr 07, 2025 pm 09:39 PM
vue.jsのオブジェクトに文字列を変換する場合、標準のjson文字列にはjson.parse（）が推奨されます。非標準のJSON文字列の場合、文字列は正規表現を使用して処理し、フォーマットまたはデコードされたURLエンコードに従ってメソッドを削減できます。文字列形式に従って適切な方法を選択し、バグを避けるためにセキュリティとエンコードの問題に注意してください。
HTMLの役割：Webコンテンツの構造
Apr 11, 2025 am 12:12 AM
HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。
