jsとcssのキャッシュの仕組みの紹介-jsチュートリアル-php.cn

この記事では主にlocalStorageのブラックテクノロジー、つまり参考価値のあるjsとcssのキャッシュ機構の関連知識を紹介します

1.ブラックテクノロジーを発見したきっかけ

見てください。今日、WeChat 公式アカウントで技術的なブログ投稿を見つけたので、Evernote を使用して収集したいと思い、記事のリンクを PC に送信しました。次に、私は習慣的にコンソールを開いてソースコードを確認し、WeChat が最近どのような新しいテクノロジーを使用したかを知りたいと考えています。

はは、以下のことが私の探偵になりたいという願望を呼び起こしました。ページがロードされた後の異常な点は、以下の図に示すように、js が 1 つだけロードされることです。

キャッシュを無効にするがオンになっているのに、なぜ 1 つの js しかロードされず、サイズがこれほど大きいのか、非常に驚きました。小さい。次に、Ctrl+O を押してリソースファイルを検索したところ、「だまされていた」ことがわかりました。実際には、複数の js ファイルがあります。

キャッシュするために localStorage を使用したのではないかというアイデアが頭に浮かびました。！早速、localStronge を調べてみましたが、それは本当でした。。。。

これが以前から実現したいと思っていたローディングパフォーマンスの最適化というアイデアではないでしょうか！ダーリン、私は無知ですが、フロントエンドチームがすでにコードを実装しています。

2 番目に、ファイル読み込みの最適化のアイデアについて話しましょう

通常、フロントエンドリソースファイル読み込みの最適化とは、ファイルの反復を変更せずに同じファイルが複数回ダウンロードされることを避けるために、可能な限りキャッシュを使用することを意味します。

一般的なアプローチは、リソースの有効期間を可能な限り延長することです。つまり、ページリソースリクエストの戻りコードが 304 になるようにキャッシュコントロールの最大有効期間を設定して、ブラウザーが直接アクセスできるようにします。ローカルキャッシュを使用します。

PC 側のネゴシエーションキャッシュ (304) は非常に高速ですが、ネットワーク上の理由により、モバイル側のネゴシエーションキャッシュの効果は PC 側ほど良くありません。さらに、携帯電話はローカルキャッシュを頻繁にクリアするため、ファイルのキャッシュ時間はそれほど長くはなりません。

このとき、localStorage が役に立ちます。

Cookie と比較して、localStorage は大量のデータをキャッシュでき、永続的に有効です。したがって、js リソースと css リソースを localStorage に保存すると、http リクエストの送信にかかる時間が節約され、ユーザーのブラウジングエクスペリエンスが大幅に向上します。

3. リソースのキャッシュに localStorage を使用する場合に解決する必要がある問題

3.1 バージョン更新のメカニズム

プロジェクトがまだ反復開発中である限り、更新の必要性を回避することは困難ですリソースファイル。

通常のリソースリクエストは、

ファイル名 + md5 http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/moon32ebc4.js

、または

リソースリンクの後に追加することができますリソースを更新する必要があるかどうかを識別するには、特定のサフィックス http://1.ss.faisys.com/js/comm/fai.min.js?v=201612051739

を使用します。

localStorage を使用する場合は、新しいキャッシュ更新メカニズムが必要です。

3.2 コードを更新するためのスキャフォールディングを構築する

localStorage キャッシュを使用する場合、リソースファイルの読み取りと書き込みを管理するための新しいスキャフォールディングが必要です。

3.3 バックグラウンドはリソース構成情報を出力します

フロントエンドはリソースを更新する必要があるため、バックグラウンドはフロントエンドが判断する根拠を出力する必要があり、リソース構成情報が必要になります。フロントエンドは構成情報に基づいて照合と比較を実行し、最終的に localStorage キャッシュを使用するか、最新のリソースファイルのダウンロード要求を再開始するかを決定します。

3.4 XSSセキュリティリスクがあります

localStorage内の情報はクライアントが自由に変更できます。ハッカーが練習したい場合は、自由に js コードを挿入できます。その後、ページが更新されると、挿入されたコードも実行されます。

4. WeChatの実践の分析

4.1 バージョン識別

__MOON__a/a_report.jsを例にとると、バージョン情報はキー__MOON__a/a_reportで保存されます。 js_ver、および//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/a_report32e586.js に保存されている値。

通常のロード方法を使用する場合は、値を取り出してスクリプトノードの src 属性に設定するだけでロードが完了します。

WeChatはバックグラウンドで出力した設定情報と値を比較することでバージョンが最新かどうかを判断し、最終的に更新されているかどうかの結果を取得します。

値の値が設定情報と一致する場合、キャッシュが使用されます。それ以外の場合は、ロード要求を再度開始します。

4.2 スキャフォールディング

WeChat は自社開発のスキャフォールディング Moon.js を使用していることがわかり、この Web ページの実際のファイル名は Moon32ebc4.js です。

変数名が難読化されたファイルなので、具体的なコードの方向性が少し分かりにくいので、ここでは解析しません。

4.3 リソース構成情報

スキャフォールディングmoon.jsが正しく動作するにはリソース構成情報が必要なため、moon.jsの前に構成情報を出力する必要があります。

moon.js の前のスクリプトタグを順番に見て、json オブジェクト window.moon_map を見つけます。

コンソールを使用してこの変数を出力し、次のように情報を表示します。

これを見ると、1 つの点が明確になります。これは、更新メカニズムに必要なリソース構成情報テーブルです。

また、構成情報のjsonオブジェクトのキーがlocalStorageのキーに対応していることがわかります。同様に、value値も1対1に対応します。

4.4 XSS攻撃

これは、WeChatのキャッシュメカニズムにXSS攻撃があるかどうかを確認するためです。ここで子供の靴を見たときに悪いことをしないでください。

jsキャッシュコードにalert("hehe");を挿入して、ページが更新されたときにポップアップウィンドウが表示されるかどうかを確認して、攻撃の脆弱性があるかどうかを確認しました。

ページを更新した後の結果は次のとおりです:

WeChat がこの種の問題を解決していないことがわかります。したがって、このキャッシュメカニズムには依然として固有の欠点があります。

4.5 WeChatの更新メカニズムをテストします

キー__MOON__a/a_report.js_verに対応する値を変更して、WeChatのスキャフォールディングmoon.js__MOON__a/a_report.jsを更新します、コードを消去してください積極的に挿入するだけです。

ここでは、ファイル名を***587.jsに変更しました（元のファイル名は***586.js）。次に、F5 キーを押してページを更新します。

結果は、report.js コードが更新され、バージョン番号が ***586.js に復元されました。

5. 結論

localStorage キャッシュにはその役割がありますが、万能薬ではありません。上記の落とし穴に注意する必要があります。

該当するシナリオを次の点に要約できます:

1. ファーストスクリーン以外のレンダリングに必要な CSS ファイルは LS キャッシュとして使用できます。

ファーストスクリーンのレンダリングに必要な CSS は、SEO で必要とされるため、従来の方法で出力する必要があります。そうしないと、クローラーがページを巡回したときにページの効果が非常に低くなります。ファーストスクリーン以外の CSS の場合、LS キャッシュを使用してリソースのダウンロード時間を短縮できます。

2. 表示クラスやアニメーションクラスなど、主要なビジネスロジック以外のコードもLSキャッシュに使用できます。

このようにして、ビジネス層におけるセキュリティの抜け穴はある程度回避できます。もちろん、フロントエンドをどのように保護しても、それは薄い紙の層にすぎません。重要なのは、バックエンドインターフェイスが安全に保護されている必要があるということです。

3. モバイル端末は LS キャッシングを行うことができます。 PC 側の LS キャッシュには最適化効果はほとんどありません。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。