Geekly Articles each Day

ブラウザのキャッシュが有効になっていることを確認してください

多くの人が、クライアントキャッシングが過去数年にわたって使用可能であり、使用すべきであるという事実について学びましたが、誰もがこれが引き起こす問題を自分の経験から知っています。 そのため、ブラウザのキャッシュがオフになっているユーザーに生じた経験と問題を急いで共有します。 ユーザーは、キャッシュがオフになっていることを知らず、ページの読み込み速度が遅いことを訴えます。

背景（スキップ）


私が偶然働いたプロジェクトでは、多数のjava-scriptファイルの問題がありました（約40個-2つのjsライブラリ+多数の自己記述コンポーネントが使用されました）。 このような多数の順次ロードされるファイルは、長いページロードを引き起こしました。 私は同志sunnybearの仕事に詳しい人として、これらすべてのファイルを1つにまとめてキャッシュすることを提案しました。

その結果、サイトがクラッシュし、長いページの読み込みに関する問題をまだ報告しているユーザーからのメッセージが突然あったときに、私たちはすでにリラックスしたかったのです。 短い検索の後、これらは何らかの理由でブラウザのキャッシュを無効にしているユーザーであることが発見されました。

そのため、タスクはキャッシュが無効になっているユーザーを識別し、タイムリーに通知することでした。 幸いなことに、プロジェクトの最初のページには、ポップアップのブロック、jsの動作、フラッシュのチェックのリストが既に含まれていました。 したがって、ブラウザのキャッシュにチェックを追加することは非常に論理的であり、既存の概念を台無しにしませんでした。

jsからブラウザのキャッシュを確認する方法は？


不思議なことに、Googleにこの質問をすると、リクエストの時間を計算するためのクレイジーなアイデアやその他の明確なアイデアのあるフォーラムのリストを入手しました。 したがって、作業キャッシュをチェックするアルゴリズムを考え出す必要がありました。
  1. サーバーにリクエストを送信します
  2. このリクエストのコンテンツとキャッシュヘッダーを含むレスポンスを取得します
  3. サーバー上のコンテンツを変更します
  4. 2番目のリクエストをサーバーに送信します
  5. 結果のコンテンツを比較します。 キャッシュが機能する場合、2番目のリクエストのコンテンツは最初のリクエストに対応し、そうでない場合は、サーバーから変更されたコンテンツを受信します


アルゴリズムのPHP実装


実装例では、2つのphpファイル+ jqueryに簡略化します。 ソリューションの本質はそれから明らかであるため、フレームワークまたは言語に合わせて自分で調整を行うことができます。

ajaxCacheChecker.phpファイルのリスト-このファイルを2回要求します
  1. <?php $etag = 'cacheChecker' ; if ( @ strtotime ( $_SERVER [ 'HTTP_IF_MODIFIED_SINCE' ] ) == $_GET [ 's' ] || trim ( $_SERVER [ 'HTTP_IF_NONE_MATCH' ] ) == $etag ) { header ( 'HTTP/1.1 304 Not Modified' ) ; } else { $maxAge = 60 ; header ( 'Last-Modified: ' . gmdate ( 'r' , $_GET [ 's' ] ) ) ; header ( 'Etag: ' . $etag ) ; header ( 'Pragma: private' ) ; header ( 'Cache-Control: private' ) ; header ( "Expires: " . date ( "r" , $_GET [ 's' ] + $maxAge ) ) ; echo microtime ( ) ; } ?>
  2. <?php $etag = 'cacheChecker' ; if ( @ strtotime ( $_SERVER [ 'HTTP_IF_MODIFIED_SINCE' ] ) == $_GET [ 's' ] || trim ( $_SERVER [ 'HTTP_IF_NONE_MATCH' ] ) == $etag ) { header ( 'HTTP/1.1 304 Not Modified' ) ; } else { $maxAge = 60 ; header ( 'Last-Modified: ' . gmdate ( 'r' , $_GET [ 's' ] ) ) ; header ( 'Etag: ' . $etag ) ; header ( 'Pragma: private' ) ; header ( 'Cache-Control: private' ) ; header ( "Expires: " . date ( "r" , $_GET [ 's' ] + $maxAge ) ) ; echo microtime ( ) ; } ?>
  4. <?php $etag = 'cacheChecker' ; if ( @ strtotime ( $_SERVER [ 'HTTP_IF_MODIFIED_SINCE' ] ) == $_GET [ 's' ] || trim ( $_SERVER [ 'HTTP_IF_NONE_MATCH' ] ) == $etag ) { header ( 'HTTP/1.1 304 Not Modified' ) ; } else { $maxAge = 60 ; header ( 'Last-Modified: ' . gmdate ( 'r' , $_GET [ 's' ] ) ) ; header ( 'Etag: ' . $etag ) ; header ( 'Pragma: private' ) ; header ( 'Cache-Control: private' ) ; header ( "Expires: " . date ( "r" , $_GET [ 's' ] + $maxAge ) ) ; echo microtime ( ) ; } ?>
  5. <?php $etag = 'cacheChecker' ; if ( @ strtotime ( $_SERVER [ 'HTTP_IF_MODIFIED_SINCE' ] ) == $_GET [ 's' ] || trim ( $_SERVER [ 'HTTP_IF_NONE_MATCH' ] ) == $etag ) { header ( 'HTTP/1.1 304 Not Modified' ) ; } else { $maxAge = 60 ; header ( 'Last-Modified: ' . gmdate ( 'r' , $_GET [ 's' ] ) ) ; header ( 'Etag: ' . $etag ) ; header ( 'Pragma: private' ) ; header ( 'Cache-Control: private' ) ; header ( "Expires: " . date ( "r" , $_GET [ 's' ] + $maxAge ) ) ; echo microtime ( ) ; } ?>
  6. <?php $etag = 'cacheChecker' ; if ( @ strtotime ( $_SERVER [ 'HTTP_IF_MODIFIED_SINCE' ] ) == $_GET [ 's' ] || trim ( $_SERVER [ 'HTTP_IF_NONE_MATCH' ] ) == $etag ) { header ( 'HTTP/1.1 304 Not Modified' ) ; } else { $maxAge = 60 ; header ( 'Last-Modified: ' . gmdate ( 'r' , $_GET [ 's' ] ) ) ; header ( 'Etag: ' . $etag ) ; header ( 'Pragma: private' ) ; header ( 'Cache-Control: private' ) ; header ( "Expires: " . date ( "r" , $_GET [ 's' ] + $maxAge ) ) ; echo microtime ( ) ; } ?>
  7. <?php $etag = 'cacheChecker' ; if ( @ strtotime ( $_SERVER [ 'HTTP_IF_MODIFIED_SINCE' ] ) == $_GET [ 's' ] || trim ( $_SERVER [ 'HTTP_IF_NONE_MATCH' ] ) == $etag ) { header ( 'HTTP/1.1 304 Not Modified' ) ; } else { $maxAge = 60 ; header ( 'Last-Modified: ' . gmdate ( 'r' , $_GET [ 's' ] ) ) ; header ( 'Etag: ' . $etag ) ; header ( 'Pragma: private' ) ; header ( 'Cache-Control: private' ) ; header ( "Expires: " . date ( "r" , $_GET [ 's' ] + $maxAge ) ) ; echo microtime ( ) ; } ?>
  9. <?php $etag = 'cacheChecker' ; if ( @ strtotime ( $_SERVER [ 'HTTP_IF_MODIFIED_SINCE' ] ) == $_GET [ 's' ] || trim ( $_SERVER [ 'HTTP_IF_NONE_MATCH' ] ) == $etag ) { header ( 'HTTP/1.1 304 Not Modified' ) ; } else { $maxAge = 60 ; header ( 'Last-Modified: ' . gmdate ( 'r' , $_GET [ 's' ] ) ) ; header ( 'Etag: ' . $etag ) ; header ( 'Pragma: private' ) ; header ( 'Cache-Control: private' ) ; header ( "Expires: " . date ( "r" , $_GET [ 's' ] + $maxAge ) ) ; echo microtime ( ) ; } ?>
  10. <?php $etag = 'cacheChecker' ; if ( @ strtotime ( $_SERVER [ 'HTTP_IF_MODIFIED_SINCE' ] ) == $_GET [ 's' ] || trim ( $_SERVER [ 'HTTP_IF_NONE_MATCH' ] ) == $etag ) { header ( 'HTTP/1.1 304 Not Modified' ) ; } else { $maxAge = 60 ; header ( 'Last-Modified: ' . gmdate ( 'r' , $_GET [ 's' ] ) ) ; header ( 'Etag: ' . $etag ) ; header ( 'Pragma: private' ) ; header ( 'Cache-Control: private' ) ; header ( "Expires: " . date ( "r" , $_GET [ 's' ] + $maxAge ) ) ; echo microtime ( ) ; } ?>
  11. <?php $etag = 'cacheChecker' ; if ( @ strtotime ( $_SERVER [ 'HTTP_IF_MODIFIED_SINCE' ] ) == $_GET [ 's' ] || trim ( $_SERVER [ 'HTTP_IF_NONE_MATCH' ] ) == $etag ) { header ( 'HTTP/1.1 304 Not Modified' ) ; } else { $maxAge = 60 ; header ( 'Last-Modified: ' . gmdate ( 'r' , $_GET [ 's' ] ) ) ; header ( 'Etag: ' . $etag ) ; header ( 'Pragma: private' ) ; header ( 'Cache-Control: private' ) ; header ( "Expires: " . date ( "r" , $_GET [ 's' ] + $maxAge ) ) ; echo microtime ( ) ; } ?>
  12. <?php $etag = 'cacheChecker' ; if ( @ strtotime ( $_SERVER [ 'HTTP_IF_MODIFIED_SINCE' ] ) == $_GET [ 's' ] || trim ( $_SERVER [ 'HTTP_IF_NONE_MATCH' ] ) == $etag ) { header ( 'HTTP/1.1 304 Not Modified' ) ; } else { $maxAge = 60 ; header ( 'Last-Modified: ' . gmdate ( 'r' , $_GET [ 's' ] ) ) ; header ( 'Etag: ' . $etag ) ; header ( 'Pragma: private' ) ; header ( 'Cache-Control: private' ) ; header ( "Expires: " . date ( "r" , $_GET [ 's' ] + $maxAge ) ) ; echo microtime ( ) ; } ?>
  13. <?php $etag = 'cacheChecker' ; if ( @ strtotime ( $_SERVER [ 'HTTP_IF_MODIFIED_SINCE' ] ) == $_GET [ 's' ] || trim ( $_SERVER [ 'HTTP_IF_NONE_MATCH' ] ) == $etag ) { header ( 'HTTP/1.1 304 Not Modified' ) ; } else { $maxAge = 60 ; header ( 'Last-Modified: ' . gmdate ( 'r' , $_GET [ 's' ] ) ) ; header ( 'Etag: ' . $etag ) ; header ( 'Pragma: private' ) ; header ( 'Cache-Control: private' ) ; header ( "Expires: " . date ( "r" , $_GET [ 's' ] + $maxAge ) ) ; echo microtime ( ) ; } ?>
  15. <?php $etag = 'cacheChecker' ; if ( @ strtotime ( $_SERVER [ 'HTTP_IF_MODIFIED_SINCE' ] ) == $_GET [ 's' ] || trim ( $_SERVER [ 'HTTP_IF_NONE_MATCH' ] ) == $etag ) { header ( 'HTTP/1.1 304 Not Modified' ) ; } else { $maxAge = 60 ; header ( 'Last-Modified: ' . gmdate ( 'r' , $_GET [ 's' ] ) ) ; header ( 'Etag: ' . $etag ) ; header ( 'Pragma: private' ) ; header ( 'Cache-Control: private' ) ; header ( "Expires: " . date ( "r" , $_GET [ 's' ] + $maxAge ) ) ; echo microtime ( ) ; } ?>
  16. <?php $etag = 'cacheChecker' ; if ( @ strtotime ( $_SERVER [ 'HTTP_IF_MODIFIED_SINCE' ] ) == $_GET [ 's' ] || trim ( $_SERVER [ 'HTTP_IF_NONE_MATCH' ] ) == $etag ) { header ( 'HTTP/1.1 304 Not Modified' ) ; } else { $maxAge = 60 ; header ( 'Last-Modified: ' . gmdate ( 'r' , $_GET [ 's' ] ) ) ; header ( 'Etag: ' . $etag ) ; header ( 'Pragma: private' ) ; header ( 'Cache-Control: private' ) ; header ( "Expires: " . date ( "r" , $_GET [ 's' ] + $maxAge ) ) ; echo microtime ( ) ; } ?>
  17. <?php $etag = 'cacheChecker' ; if ( @ strtotime ( $_SERVER [ 'HTTP_IF_MODIFIED_SINCE' ] ) == $_GET [ 's' ] || trim ( $_SERVER [ 'HTTP_IF_NONE_MATCH' ] ) == $etag ) { header ( 'HTTP/1.1 304 Not Modified' ) ; } else { $maxAge = 60 ; header ( 'Last-Modified: ' . gmdate ( 'r' , $_GET [ 's' ] ) ) ; header ( 'Etag: ' . $etag ) ; header ( 'Pragma: private' ) ; header ( 'Cache-Control: private' ) ; header ( "Expires: " . date ( "r" , $_GET [ 's' ] + $maxAge ) ) ; echo microtime ( ) ; } ?>


index.phpファイルのリスト-このファイルは、いわばアプリケーションです
  1. <？php $ timeStamp = time （ ） ; ？>
  2. <html>
  3. <head> <script type = "text / javascript" src = "js / jquery.js"> </ script> </ head>
  4. <本体>
  5. <div id = "cacheCheck">キャッシュの確認</ div>
  6. <スクリプト>
  7. var cacheCheck1 = "";
  8. var cacheCheck2 = "";
  10. 関数checkBrowserCache（）{
  11. $ .get（ "ajaxCacheChecker.php？s = <？= $ timeStamp ？> "、function（data）{
  12. cacheCheck1 =データ。
  13. $ .get（ "ajaxCacheChecker.php？s = <？= $ timeStamp ？> "、function（data2）{
  14. cacheCheck2 = data2;
  15. checkBrowserCacheResults（）;
  16. }）;
  17. }）;
  18. }
  20. 関数checkBrowserCacheResults（）{
  21. if（cacheCheck1！= cacheCheck2）{
  22. $（ '＃cacheCheck'）。text（ 'cache disabled。ブラウザのキャッシュを有効にしてください...'）;
  23. } else {
  24. $（ '＃cacheCheck'）。text（ 'cache enabled！'）;
  25. }
  26. }
  28. checkBrowserCache（）;
  29. </ script>
  30. </ body>
  31. </ html>


欠点


解決策はOperaおよびSafariでは機能しません
これらのブラウザーのサポートを追加する方法を知っている場合-コメントを書く

おわりに


私の研究が、長い読み込みページで顧客やユーザーとの論争を解決するのに役立つことを願っています。

この決定は、すべてのページで検証が行われることを意味するものではありません。 どこでも検証を実装する場合は、同志maghamed によるコメントで指定されたロジックを使用します

UPD ：アルゴリズムのセッションを削除してくれた仲間のtenshiとTheShockに感謝
UPD2 ：同志のzerkmsによるコメント。 OperaとSafariのバグを発見

Source: https://habr.com/ru/post/J96934/

More articles:


All Articles