HTML5のキャッシュメカニズムとは何ですか?キャッシュを更新する方法-H5 チュートリアル-php.cn

HTML5のキャッシュメカニズムとは何ですか?キャッシュを更新する方法

云罗郡主

リリース： 2019-01-04 10:45:17

オリジナル

7455 人が閲覧しました

この記事では、HTML5 キャッシュメカニズムとは何なのかについて説明します。キャッシュの更新方法については、参考にしていただければ幸いです。 [推奨読書: 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 サイトの他の関連記事を参照してください。