ブラウザのLocalStorageにWebページのjavascriptおよびcssリソースを保存する価値があるのか、それともキャッシュ自体を処理できるようにするのかという質問には明確な答えがありません。 長所と短所があります。 私の観点から、主なプラス-ダウンロード速度-は他のすべてを上回ります。 これは、EDGEおよび3Gのユーザーに非常によく感じられます。
開発者ツールで「Cached」という言葉を誇らしげに示している標準ブラウザキャッシュのファンの場合、Fiddlerを開いて、304 HTTPのすべてのキャッシュされたリソースに対して、応答がまだリクエストであることを確認することをお勧めします。 次に、pingdom.comのようなサイトにアクセスして、リクエストの実行時間全体にデータを直接送信することが関心を引くことを確認することをお勧めします。 つまり、特にファイルが小さい場合、猫はそのようなキャッシングから絶対値で泣いています。
LocalStorageにリソースを保存するための提案されたスキームは非常に単純です。
最初に、ファイル変更の追跡が実装されます;このため、最後のファイル変更の時刻が「バージョン」として使用されます。 変更されると、リソースはローカルストレージにリロードされます。
リソースは次のとおりです。
<script type="text/javascript"> <?php include("ls.js"); ?> requireResource( 'mobile.css', 'css', '<?php echo filemtime(__DIR__ . "/css/mobile.css") ?>', '<?php echo "/css/mobile.css?" . filemtime(__DIR__ . "/css/mobile.css") ?>'); </script>
requireResource関数には、リソースの名前(この名前でローカルストレージに移動します)、リソースのタイプ、バージョン、およびURLが渡されます。 ls.jsコードのロジックは単純です-リソースがリポジトリ内にあり、そのバージョンが指定されたものと一致する場合、インラインになります。 そうでない場合は、再度読み込まれ、リポジトリに配置されてHTMLコードにインラインで配置されます。
function _cacheResource(name, t, version, url) { var xmlhttp = new XMLHttpRequest();
コードをインライン化する方法、またはdocument.write()を使用する方法を選択できます。 または、DOMに要素を挿入します。 最初のケースでは、ページ自体がリソースを取得したかどうかのコピーを取得します。 2番目は論理的にはより正確ですが、欠点があります-たとえば、jsコードは実行されません。 手動モードで初期化を実行する必要があります-これは簡単ですが、覚えておく必要があります。
もう1つのポイントは、リソースをロードするシーケンスです。 特定の順序が必要な場合は、この順序でリソースを1つのファイルに配置するか、同期ダウンロードによって、これを提供する必要があります。
この例では、jsとcssの2種類のリソースが使用されます。 原則として、ブラウザーのローカルストレージにシリアル化できるすべてのものを拡張できます。
結果は明らかです-私のcssファイルとjsファイルは、ブラウザー開発ツールとFiddler'eに表示されなくなりました(サーバー上で更新されない限り)。 サイトが大幅に速く開きます。 実稼働環境でのjsおよびcssデバッグのプロセスはそれほど難しくありません。 また、開発マシンでは、すべてのjsファイルとcssファイルは便宜上、個別にロードされます。
Google Pagespeedなどのサイトの速度とパフォーマンスを測定するツールは、このような自家製のキャッシュを理解しないため、パフォーマンスの向上が見られないことに注意してください。
jsコードの基礎は
GitHubから取得さ
れ 、確定され
ます 。