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）
ホットトピック
7908
15
1652
14
1411
52
1303
25
1248
29
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）国家管理とイベント処理は、インタラクティブ性を高めます。
HTML：構造、CSS：スタイル、JavaScript：動作
Apr 18, 2025 am 12:09 AM
Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。
HTMLの未来：ウェブデザインの進化とトレンド
Apr 17, 2025 am 12:12 AM
HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。
hadidb：pythonの軽量で水平方向にスケーラブルなデータベース
Apr 08, 2025 pm 06:12 PM
hadidb：軽量で高レベルのスケーラブルなPythonデータベースHadIDB（HadIDB）は、Pythonで記述された軽量データベースで、スケーラビリティが高くなっています。 PIPインストールを使用してHADIDBをインストールする：PIPINSTALLHADIDBユーザー管理CREATEユーザー：CREATEUSER（）メソッド新しいユーザーを作成します。 Authentication（）メソッドは、ユーザーのIDを認証します。 fromhadidb.operationimportuseruser_obj = user（ "admin"、 "admin"）user_obj。
Vue AxiosによってURLが要求されていますか？
Apr 07, 2025 pm 10:12 PM
はい、Vue Axiosによって要求されたURLは、成功するためのリクエストが正しくなければなりません。 URLの形式は、プロトコル、ホスト名、リソースパス、オプションのクエリ文字列です。一般的なエラーには、プロトコルの欠落、スペルミス、重複スラッシュ、ポート番号の欠落、および誤ったクエリ文字列形式が含まれます。 URLの正しさを確認する方法：ブラウザアドレスバーに手動で入力するか、オンライン検証ツールを使用するか、リクエストでVue axiosのvalimatestatusオプションを使用します。
