CSSがキャッシュされないのはなぜですか?-フロントエンドQ&A-php.cn

CSSがキャッシュされないのはなぜですか?

PHPz

リリース： 2023-04-23 15:07:44

オリジナル

635 人が閲覧しました

CSS (Cascading Style Sheets) は、フロントエンド開発における最も基本的なテクノロジーの 1 つであり、Web サイトのページを美しくし、ユーザーエクスペリエンスを最適化するためによく使用されます。ただし、Web サイト開発者は CSS スタイルをデバッグするときに、CSS ファイルがキャッシュされないという問題に遭遇することがよくあります。

CSS キャッシュとは何ですか?

Web サイトにアクセスすると、サーバーは HTML、CSS、JavaScript、画像、その他のファイルなどの静的リソースをブラウザーに送信します。ページの読み込み速度とユーザーエクスペリエンスを向上させるために、ブラウザーはこれらのファイルをキャッシュし、次回アクセスしたときに同じページがより速く読み込まれるようにします。このキャッシュメカニズムは HTTP キャッシュと呼ばれます。

ユーザーが初めてページにアクセスすると、ブラウザはすべての静的リソースをダウンロードし、ローカルキャッシュに保存します。ユーザーが再度ページにアクセスすると、ブラウザはこれらのファイルを再ダウンロードせずにキャッシュから直接読み取ることができます。これにより、ページの読み込み速度が向上し、サーバーの負荷が軽減されます。

CSS ファイルがキャッシュされないのはなぜですか?

ただし、開発者が CSS スタイルを変更すると、ブラウザーがページ内のスタイルを更新せず、以前にキャッシュされたファイルを読み込んだままであることが判明することがあります。これは、CSS ファイルがキャッシュされない問題です。

この問題の原因は、HTTP キャッシュメカニズムの動作原理にあります。ブラウザが静的リソースをリクエストすると、リクエストヘッダー If-Modified-Since が送信され、リソースの Etag 値がサーバーに返されます。サーバーはこのリクエストヘッダーをチェックし、ブラウザのローカルキャッシュの有効期限が切れていない場合、サーバーはローカルキャッシュからファイルを取得できることを示す 304 ステータスコードを返します。したがって、開発者が CSS スタイルを更新した場合でも、ブラウザーが古いリクエストヘッダーを持つファイルを要求した場合、サーバーは依然として 304 ステータスコードを返し、ブラウザーは CSS スタイルを更新できません。

CSS ファイルがキャッシュされない問題を解決するにはどうすればよいですか?

ブラウザキャッシュのクリア

開発者は、ブラウザキャッシュをクリアすることで、CSS ファイルが更新されない問題を解決できます。 Chrome ブラウザでは、アドレスバーに chrome://settings/clearBrowserData と入力してデータのクリアページを開き、ブラウザのキャッシュと Cookie データのクリアを選択して、[データのクリア] ボタンをクリックします。

URL にバージョン番号を追加する

開発者は、CSS ファイルの URL にバージョン番号を追加して、ブラウザーが最新のファイルを確実に取得できるようにすることができます。たとえば、../style.css?v=1.0 の場合、スタイルを変更した後、バージョン番号を他の数値またはタイムスタンプに変更すると、ブラウザーはこれが新しいファイルであると認識し、スタイルを更新します。この方法では、ファイルリンクを手動で変更する必要があり、小規模なプロジェクトに適しています。

Cache-Control と Pragma を設定する

開発者は、サーバー側の HTTP 応答ヘッダーに Cache-Control と Pragma を設定して、ブラウザがリソースをキャッシュする時間を制御できます。 . そしてマナー。たとえば、Cache-Control を no-cache または max-age=0 に設定し、Pragma を no-cache に設定すると、ブラウザはリソースをキャッシュせず、各リクエストはファイルの最新バージョンを返します。この方法は、大規模なプロジェクトやトラフィックの多い Web サイトに適しています。

結論

CSS ファイルがキャッシュされない問題は、フロントエンド開発でよくある問題ですが、ユーザーはブラウザのキャッシュをクリアし、バージョン番号を使用し、キャッシュを設定することで問題を解決できます。コントロールとプラグマ: この問題により、Web サイトの読み込み速度とユーザーエクスペリエンスが向上します。

以上がCSSがキャッシュされないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。