ヒントフロントエンドによりブラウザが静的リソースをキャッシュできないようにする-htmlチュートリアル-php.cn

ヒントフロントエンドによりブラウザが静的リソースをキャッシュできないようにする

PHPz

リリース： 2018-12-25 11:18:02

転載

1484 人が閲覧しました

モバイルブラウザ UC は常に良好なパフォーマンスを発揮します。QQ ブラウザと WeChat 上の Web サイトは直接開くことができます (同様に QQ ブラウザのコアを使用します)。

CSS 画像などがキャッシュされます。これらの変更が発生した場合、Web ページを更新してもまったく効果がありません。

一部のモバイルブラウザはトラフィックやパフォーマンスの節約などの理由で常に静的リソースをキャッシュするため、問題は発生しません。このままであれば問題ありませんが、サーバー上の css ファイルの内容が影響を受ける可能性があります。が変更され、モバイルブラウザがキャッシュを解放しないと、一部のページで明らかな問題が発生するため、css、js、jpg、swf などにタイムスタンプを追加する必要があります。ファイルを変更するたびにタイムスタンプを変更するのが最善です。が変更され、ブラウザにダウンロードさせ、変更がない場合はブラウザによってキャッシュされたファイルを呼び出すようにします

それで、これを行うことができます

<?php $css=&#39;/xxx/xxx.css&#39; ?>
<link rel="stylesheet" type="text/css" href="<?php echo "$css" . &#39;?time=&#39; . filemtime( $css ); ?>" />

ログイン後にコピー

注:

php 原則として、'' "" はユニバーサルですはい、 echo 関数の出力では、「」内の内容は純粋な文字列に解析され、「」内の変数は変数の値に解析されますが、関数の値は解析されません。これは PHP のコネクタです。

filemtime("file ") は、ファイルの最終変更時刻を取得し、1430451431 のような形式で UNIX タイムスタンプを取得します。

原理は、サフィックスを追加することで要求されたファイルの URL を変更し、ブラウザーに強制的に URL を変更させることです。これはダウンロードしてキャッシュを更新するための別のファイルであると考えてください

Baidu Cloud のホームページの HTML ソースコードでは、最終的な出力コンテンツは次のようになります

<link href="/ppres/static/css/pcloud_feedpage_all.css?t=201504154611" rel="stylesheet" type="text/css"/>

ログイン後にコピー

CSS ファイルにはこのようにタイムスタンプを付けることができ、他の静的リソースも次の方法で追加できますこれを参考に

ただし、開発中にこれを直接実行してタイムスタンプを毎回更新することもできます

<link rel="stylesheet" type="text/css" href="/xx/style.css?time=<?php echo time(); ?> " />

ログイン後にコピー

jsp asp などの他の言語でも簡単に実行できます

ただし、JavaScript では実行できません。これを使用してタイムスタンプを取得することもできます

<script>
var time1=Date.parse(new Date());
var time2=new Date().valueOf();
var time3=new Date().getTime();
console.log('timestamp:'+time1);
console.log('timestamp:'+time2);
console.log('timestamp:'+time3);

/* time1的毫秒部分将是000,不会计算毫秒
 time2,time3会记录精确到毫秒,且结果相同 */
</script>

ログイン後にコピー

が、クライアントに参照パスが挿入されても意味がありません。リクエストはサーバーに送信されるため、考慮する必要があるのは実行時間とタイムスタンプです。もう 1 つはサーバー側のルーティングコントロールです。これは winy から参照できます: http://www.hilau .com/1311273.html /or/ http://www.laozhuhome.com/html /automatically-version-your-css-and-javascript-files

フロントエンドワークフローに grunt を使用するときにこのようなツールを使用することもできます

自動バージョンインクリメント

さまざまな方法があるので、お好きなものを選択してください!

要約: 上記がこの記事の全内容です。皆様の学習に役立つことを願っています。