前に書く:
WebブラウザにbaiBrowserCachingが必要なのはなぜですか?
URLをブラウザで開くと、URLの解決-> DNSクエリ-> TCP接続->要求の処理->応答の受け入れ->ページのレンダリング、一連の手順の後、何も実行されないことは誰もが知っています( 、インターネットの速度が遅すぎる、突然のインターネット切断、サーバーエラー、コードエラーなど)ページのコンテンツは、目の前に正常に表示されます。
さらに、WebページにロードされたすべてのリソースはHTTP接続を確立する必要があります。クライアント(ブラウザ)とサーバーは、3回のハンドシェイク、4回の手を振った後、DOMツリーのレンダリングプロセスを実行する必要があります。実際には簡単ではありません(特に以前のネットワーク環境とソフトウェアおよびハードウェアテクノロジはあまり良くありませんでしたが、今ではすべてが良くなっています!)、ページのレンダリング速度を向上させるために、このブラウザキャッシュがあります。
ブラウザキャッシングの利点:
初めてWebを閲覧するとき、ブラウザはデフォルトでロードされた一連のリソースを自動的にキャッシュします。前のWebページを再度開くと、キャッシュに今回要求されたリソースがあるかどうかを最初に確認します。キャッシュから直接読み取り(そうでない場合はサーバーをリクエスト)、ページにアクセスできるようにします。リクエスト時間を短縮し、ネットワークトラフィックを節約し、応答速度を向上させます。これにより、ユーザーエクスペリエンスが向上します。
ブラウザのキャッシュによって引き起こされるデメリット:
キャッシングはユーザーにとって確かに有益ですが、開発者として、特にフロントエンド開発では、プロジェクトに新しい要件があるときはいつでも、バージョン更新の反復後、ユーザーがすでにキャッシュを持っている場合は、何が表示されるかを知っています。このページは以前に閲覧したキャッシュ効果のままであり、更新された効果を確認することはできません。この状況は、特にWeChat組み込みブラウザでより深刻です(急いでいるときは、カスタマーサービスが一時的にユーザーにWeChatキャッシュをクリアして解決するように指示します。この問題)。
WeChatブラウザのキャッシュをクリアする方法:
WeChatブラウザはモバイルAndroid環境とIOS環境で異なるブラウザカーネルを持っているため、異なるバージョンのWeChatと異なるシステム間でキャッシュをクリーンアップする方法は少し異なります。
IOS環境でWeChatキャッシュを手動でクリアします。
次のようないくつかのクリーニング方法があります(Android環境も適用可能です)
- 最初に現在のWeChatアカウントからログアウトしてから、WeChatに再度ログインします。
- WeChatパブリックアカウント、エンタープライズアカウントなどの場合は、最初に注意を払い、次にもう一度フォローします。
- ページに入ったら、右上の「...」ボタンをクリックし、画面下部のポップアップオプションで「更新」をクリックします。
- マイクロチャネルナビゲーションメニューの下部にある[I]をクリック-> [設定]-> [一般]-> [ストレージ]-> [キャッシュをクリーンアップ]または[クリーンアップ]をクリックします。
Android環境でWeChatキャッシュを手動でクリアします。
WeChatでTencentBrowser Developer Serviceが提供する X5カーネルデバッグ専用ページの URLを開きます:https://debugx5.qq.com、WeChatブラウザーで開いた後、クリアするオプションをチェックし、クリアボタンをクリックします。 !以下に示すように:
注:一部の携帯電話では、debugx5.qq.comを開くと、「使用しているカーネルはX5カーネルではありません。...にアクセスしてください」というプロンプトが表示される場合があります。
上記の状況が発生した後、最初 にWeChatブラウザでhttp://debugmm.qq.com/?forcex5=trueを開き、次にdebugx5.qq.comを開いて ください 。開けます!
上記のキャッシュをクリアする方法に加えて、Android環境でキャッシュをクリアする別の方法があります。それは、Android電話の設定->アプリケーション->アプリケーション管理でWeChatを見つけてから、アプリケーション管理でWeChatAPPをクリアすることです。以下に示すように、キャッシュします。
WeChatブラウザキャッシュをクリアするその他のソリューション:
1. HTMLページの先頭にあるメタタグをキャッシュしないように設定します(ただし、このメソッドはWeChatブラウザーでは無効です):
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
</head>
2.関連する静的リソースの名前を変更します。
最後に、キャッシュの問題に関しては、すべてのユーザーがキャッシュをクリアする、またはクリアする意思があるわけではないため、開発から始める必要があると個人的に感じています。この問題は、最初の開始点からしか回避できません。
リソースをリロードする主な目的は、Webページ関連のリソースをロードするときにキャッシュを読み取るのではなく、サーバーからリソースを取得することです。リソースが再結合されている限り、新しいリソースとしてロードされ、キャッシュの問題は発生しません。
ただし、ファイルリソースが多い場合は、手動で1つずつ変更することはできず面倒なので、通常はWebpack、Gulp、FIS、Gruntなどの構築ツールを使用してファイルリソースの名前を変更します。または、Vue、React、Angurlなどの一般的なフロントエンドフレームワークで使用され、すべてにリソース命名機能があります。
パッケージ化および生成されたファイルリソースを次の図に示します。パッケージ化および生成されたファイルリソースの名前が変更されるたびに、オンラインになった後に新しいリソースとしてロードされるため、キャッシュの問題は発生せず、開発後に更新されない限り、反復バージョン(反復を更新する場合、影響はありません。重要なのは、ユーザーがファイルを初めてロードするときに、このトラフィックがユーザーにとって問題にならないことです)。ユーザーは、反復を初めて更新することもあります。ユーザーエクスペリエンスと更新の繰り返しが相互に影響を与えないように、自動的にキャッシュされます。
例:xxx.html、xxx.jpg、xxx.css、xxx.jsなど。