Tweet

Pocket

キャッシュを有効にしつつ、cssやjsファイルなどのHTMLから呼び出されるファイルの変更を確実に反映させる方法

ブラウザは通信量を削減して表示速度を向上させるために、初回アクセス時にダウンロードしたファイルはローカルのキャッシュ領域に一定期間ほど保存し、再アクセス時はキャッシュ領域にファイルがあれば、サーバからはダウンロードせずにキャッシュ領域に保存してあるファイルを使用する。

そのため、cssやjavascriptなどのファイルを更新した際にキャッシュ対策をしておかないと、ブラウザは古いキャッシュファイルを使用して画面表示をすることとなり、最新版のcssやjavascriptなどのファイルが反映されないことがある。

対策としては以下のようにファイルパスの後ろにパラメータとして「?202002161251」のようにファイルの更新日付のタイムスタンプをつけるようプログラミングしておくことで、キャッシュを有効にしつつファイル更新した際は最新のファイルをサーバからダウンロードするようになる。