ホームページ > 記事 > ウェブフロントエンド > HTMLキャッシュに関する知識について話しましょう
Web サイトへのアクセスが増加するにつれ、Web ページをいかに素早く読み込むかがユーザー エクスペリエンスの重要な側面になってきました。この問題を解決する有効な手段の 1 つが HTML キャッシュ技術です。この記事では、HTMLキャッシュの概念や設定方法、最適化手法について紹介します。
1. HTML キャッシュの概念
HTML キャッシュ、つまりブラウザー キャッシュとは、ブラウザー内でページ リソース (HTML、CSS、JS、その他のファイルなど) をキャッシュして処理を容易にすることを指します。次回アクセスするときは、ネットワーク リクエストを経由するのではなく、ローカル キャッシュから読み取られます。これにより、リソース要求の数が効果的に削減され、ページの読み込みが高速化され、ユーザー エクスペリエンスが向上します。
2. HTML キャッシュの設定方法
サーバー側では、設定によってブラウザーがキャッシュするかどうかを制御できます。 HTTP 応答ヘッダー ページ リソース。一般的に使用される HTTP 応答ヘッダーは次のとおりです:
クライアント側では、次の方法で HTML キャッシュを設定できます:
<meta http-equiv="Cache-Control" content="max-age=3600, must-revalidate"> <meta http-equiv="Expires" content="Sat, 1 Jan 2022 00:00:00 GMT">
このうち、Cache-Control と Expires の使用方法はサーバー側の設定と同じです。
if( window.localStorage ){ // 支持本地存储 if( !localStorage.getItem('firstLoadTime') ){ // 判断是否第一次访问 localStorage['firstLoadTime'] = (new Date()).getTime(); }else if( (new Date()).getTime() - localStorage['firstLoadTime'] > 1000 * 60 * 60 * 24 * 7 ){ // 缓存一周 localStorage.clear(); localStorage['firstLoadTime'] = (new Date()).getTime(); } }
このコードは、ページのキャッシュ時間を 1 週間に設定します。
3. HTML キャッシュの最適化スキル
静的リソース (CSS、JS、画像など) を分離する動的リソースからのリソース (HTML、PHP、ASP など) の分離は、一般的な最適化方法です。現時点では、静的リソースのキャッシュ時間を長く設定して、リクエストの数と帯域幅の消費を減らすことができます。
URL の設計もキャッシュの有効性に影響します。したがって、URL は次のように設計できます。
キャッシュの有効性検証は、サーバー側の Last-Modified および ETag セットを通じて実現できます。ブラウザーのキャッシュの有効期限が切れたら、サーバーにリクエストを送信して、キャッシュされたリソースがまだ有効かどうかを確認できます。有効な場合は、キャッシュされたリソースをローカルから直接読み取ることができます。有効でない場合は、リソースを再度リクエストする必要があります。
4. 概要
HTML キャッシュ テクノロジは、ページの読み込みを高速化し、ユーザー エクスペリエンスを向上させる効果的な最適化方法です。実際の運用では、サーバー側の設定とクライアント側の設定を柔軟に使い分け、キャッシュの有効性検証やURLの設計などに注意する必要があります。
以上がHTMLキャッシュに関する知識について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。