開発者ツールで「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(); // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { localStorage.setItem(name, JSON.stringify({ content: xmlhttp.responseText, type: t, version: version })); } else { console.warn('error loading '+url); } } } xmlhttp.open("GET", url, true); xmlhttp.send(); } function _loadResource(url, type, name, version, callback) { if (type == "js") { document.write('<script id="' + name + '" src="', url, '"><\/script>\n'); } else if (type == "css") { document.write('<link id="' + name + '" rel="stylesheet" href="', url, '" />\n'); } var s = document.getElementById(name); if (s.readyState) { //IE s.onreadystatechange = function() { if (s.readyState == "loaded" || s.readyState == "complete") { s.onreadystatechange = null; _cacheResource(name, type, version, url); if (callback) callback(); } }; } else { //Others s.onload = function() { _cacheResource(name, type, version, url); if (callback) callback(); }; } } function _injectResource(content, url, name, version, callback) { var c = JSON.parse(content); // cached version is not the request version, clear the cache, this will trigger a reload next time if (c.version != version) { localStorage.removeItem(name); _loadResource(url, c.type, name, version, callback); return; } if (c.type == "js") { var s = document.createElement('script'); s.type = "text/javascript"; } else if (c.type == "css") { var s = document.createElement('style'); s.type = "text/css"; } var scriptContent = document.createTextNode(c.content); s.appendChild(scriptContent); document.getElementsByTagName("head")[0].appendChild(s); if (callback) callback(); } function requireResource(name, type, version, url, callback) { var c = localStorage.getItem(name); if (c == null) { _loadResource(url, type, name, version, callback); } else { _injectResource(c, url, name, version, callback); } }
コードをインライン化する方法、またはdocument.write（）を使用する方法を選択できます。 または、DOMに要素を挿入します。 最初のケースでは、ページ自体がリソースを取得したかどうかのコピーを取得します。 2番目は論理的にはより正確ですが、欠点があります-たとえば、jsコードは実行されません。 手動モードで初期化を実行する必要があります-これは簡単ですが、覚えておく必要があります。
もう1つのポイントは、リソースをロードするシーケンスです。 特定の順序が必要な場合は、この順序でリソースを1つのファイルに配置するか、同期ダウンロードによって、これを提供する必要があります。
この例では、jsとcssの2種類のリソースが使用されます。 原則として、ブラウザーのローカルストレージにシリアル化できるすべてのものを拡張できます。
結果は明らかです-私のcssファイルとjsファイルは、ブラウザー開発ツールとFiddler'eに表示されなくなりました（サーバー上で更新されない限り）。 サイトが大幅に速く開きます。 実稼働環境でのjsおよびcssデバッグのプロセスはそれほど難しくありません。 また、開発マシンでは、すべてのjsファイルとcssファイルは便宜上、個別にロードされます。
Google Pagespeedなどのサイトの速度とパフォーマンスを測定するツールは、このような自家製のキャッシュを理解しないため、パフォーマンスの向上が見られないことに注意してください。
jsコードの基礎はGitHubから取得され 、確定されます 。