browser-cache - ブラウザは、有効期限ヘッダー、キャッシュ制御ヘッダー、last-modified-headerでどのように機能しますか？

Question

私はWeb開発者であり、PHPと.NETの両方を使用しています。Webでの作業に1年以上の経験があり、ブラウザのキャッシュ機能を完全に理解することはできませんでした。ここのWebGurusが私を助けてくれることを願っています。私が頭に浮かぶ質問は次のとおりです。

ブラウザは実際にどのようにデータをキャッシュしますか、キャッシュされたファイルがサーバー上で変更されたかどうかを確認するように要求しますか？
開発者がブラウザのキャッシュを最大限に活用するだけでなく、まったく面倒なことなくサイトに新しい変更をプッシュできるようにするための理想的な方法は何ですか。ブラウザがどういうわけか私のCSSとJSと画像をキャッシュし、サーバーへの変更を毎回チェックするだけなら、これで問題を解決できると思います。しかし、私はそれを行う方法がわかりません。

score 4 · Accepted Answer

このブログ投稿が役立つ場合があります。

必要に応じて変更を加える機能を維持しながら、キャッシュを使用する方法について説明します。

score 2 · Accepted Answer

CSS ファイルの標準的な「回避策」は、リンクにパラメーターを段階的に追加することです。

<link rel="stylesheet" href="http://mysite.com/styles.css?v=1">
<link rel="stylesheet" href="http://mysite.com/styles.css?v=2">
...

これにより、ブラウザはファイルを再ロードするよう強制されます。

score 0 · Accepted Answer

サーバー側の言語を使用している場合は、ブラウザにファイルを再度ダウンロードさせることができます。

<script src="script.js?<?= uniqid(); ?>">
<img src="myfile.jpg?<?= uniqid(); ?>">

ただし、より高速なサイトが必要な場合は、キャッシュを使用することをお勧めします。無効にする前に、キャッシュであるものを再度ダウンロードする必要がないことに注意してください。

キャッシュする必要があるものを制御する別の方法、HTML5アプリケーションキャッシュ、キャッシュロジックをマニフェストファイルにダンプする方法があります。したがって、マニフェストファイル自体が変更されるまで、マニフェスト内のすべてのファイルが再度ダウンロードされることはありません。

JS、CSS、画像ファイルで何かを変更し、その変更を定期的な訪問者にプッシュする必要がある場合は、マニフェストファイルも更新する必要があることを覚えておいてください。公開日のように追加することで、ブラウザはそれが新しいマニフェストであることを認識し、すべてを再度ダウンロードします。

3 に答える 3