ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5のキャッシュメカニズムとは何ですか?キャッシュを更新する方法
HTML5のキャッシュメカニズムとは何ですか?キャッシュを更新する方法
- 云罗郡主オリジナル
- 2019-01-04 10:45:177452ブラウズ
この記事では、HTML5 キャッシュ メカニズムとは何なのかについて説明します。キャッシュの更新方法については、参考にしていただければ幸いです。 [推奨読書: Html5 チュートリアル ]
バックグラウンド
オフライン キャッシュは、HTML5 によって提供される新機能です。 HTML5 が提供するオフライン キャッシュ機能を使用すると、サイトでよく使用される一部のファイルをローカルにキャッシュし、ネットワークがない場合でもキャッシュされたページにアクセスできます。キャッシュできるファイルの種類は数多くあります。これには、html、css、js、静的画像リソースなどが含まれますが、これらに限定されません。
実際、オフライン キャッシュはネットワークがない場合にのみ使用されるわけではありません。ネットワークがある場合でも、ローカルにキャッシュされたファイルが最初に使用されます。ネットワークがある場合、ブラウザは 200 を返します。
オフライン キャッシュには多くの利点があります。まず、ユーザー エクスペリエンスを効果的に向上させ、ユーザー トラフィックを節約できます。次に、ページの読み込み速度が向上し、キャッシュされたリソースをより速く読み込むことができます。第三に、サーバーの負荷が軽減され、ブラウザは更新または変更されたリソースのみをサーバーからダウンロードします。
ブラウザのサポート
基本的に、IE を除くすべての主流ブラウザがこれをサポートしていますが、結局のところ、この種のブラウザと互換性がない方が良いのです。
マニフェスト
ページでオフライン キャッシュを使用するには、ページの HTML にマニフェスト属性を追加するだけです。使用方法は次のとおりです。
<!DOCTYPE HTML> <html manifest = "cache.appcache"> <body>…</body> </html>
ブラウザがページをロードし、HTML に属性マニフェストがあることがわかると、cache.appcache ファイルをリクエストします (追記: これは単なるファイル名で、通常は .appcache で終わります)。通常、プロジェクトのルート ディレクトリに配置されます)
btw: マニフェスト ファイルは MIME タイプを「text/cache-manifest」に設定する必要がありますが、これは必須です。サーバー上で設定する必要があります。
マニフェスト ファイル (cache.appcache) の記述方法を見てみましょう
この情報は w3School から見つけました:
CACHE MANIFEST - このタイトルの下にリストされています。最初のダウンロード後にキャッシュされます
NETWORK - この見出しの下にリストされているファイルはサーバーへの接続が必要であり、キャッシュされません
FALLBACK - この見出しの下にリストされているファイルにはフォールバック ページが必要です。アクセスできません (404 ページなど)
cache.appcache ファイルは次のとおりです
# CACHE MANIFEST是必须的！ CACHE MANIFEST /style.css /logo.png /app.js # 不缓存的文件，永远不会被缓存，且离线时是不可用的 NETWORK: login.js # 可以使用星号来指示所有其他资源/文件都需要因特网连接： NETWORK: * # 注释：获取不到资源时的备选路径，就跳转到指定页面 FALLBACK: index.html 404.html
キャッシュの更新方法
記事の冒頭で述べたように、参照 サーバーは、HTML 上にマニフェスト ファイルがあることを検出すると、まず、cache.appcache ファイルを要求し、次にマニフェスト ファイルの内容に基づいてそれをキャッシュします。具体的なプロセスは次のとおりです。
オンライン状況でアプリケーションに初めてアクセスすると、ブラウザはマニフェスト ファイルの内容に基づいて対応するリソースをダウンロードし、オフラインで保存します。アプリケーションがアクセスされ、リソースがオフラインで保存されている場合、ブラウザーはオフライン リソースを使用してページを読み込み、新しいマニフェスト ファイルと古いマニフェスト ファイルを比較します。ファイルが変更されていない場合は、いいえ。操作が実行され、ファイルが変更されると、ファイル内のリソースが再ダウンロードされ、オフラインで保存されます。
オフラインの場合、ブラウザはローカル キャッシュを直接使用します。問題は見つかりましたか? コードを更新した後もブラウザが元のキャッシュを使用している場合はどうなりますか?
最も単純かつ大雑把な方法は、ブラウザのキャッシュを手動でクリアすることです。もちろん、これは実稼働環境ではほとんど行われません。
マニフェストの変更方法
「#」で始まる行はコメント行ですが、他の目的にも使用できます。アプリケーションのキャッシュは、マニフェスト ファイルが変更されると更新されます。画像を編集したり、JavaScript 関数を変更したりしても、これらの変更は再キャッシュされません。コメント行の日付とバージョン番号を更新すると、ブラウザにファイルが再キャッシュされます。
以上がHTML5のキャッシュメカニズムとは何ですか?キャッシュを更新する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。