atitit.パフォーマンスの向上AppCache_html/css_WEB-ITnose

パフォーマンスの向上 AppCache

1.1. オフライン ストレージ 2

3. AppCache イベント ポイントを図 2 に示します。

3.2. マニフェストファイル 4

3.3. 自動化ツール 4

3.3.1. キャッシュ: (必須) 5

3.4. ページのパラメータを継承し、JS を解析する方法 6

3.6.オフライン ページの更新 ロングテール 質問 6

3.7. キャッシュを更新する方法 7

3.8. 注意事項 8

1.1.

Origin

HTML5 より前の Web ページはすべてインターネットに接続する必要があります。実際、これは Web の機能であり、PC 時代には大きな問題ではありませんでしたが、モバイル インターネット時代では、デバイス端末の位置は固定されなくなり、無線信号に依存します。たとえば、電車に乗ってトンネルを通過すると（15 分）、ネットワークの信頼性が低下し、Web にとって非常に有害な Web サイトにアクセスできなくなります。 「ecmascript コレクション」として。

html5 ではキャッシュマニフェストファイルが導入されました。では、キャッシュ マニフェストとは何なのか、次に説明します。

2. オフライン ストレージ

実際に作業で使用されるオフライン キャッシュには、localstorage と Application Cache があり、どちらも良いものです。1 つは Ajax リクエストのキャッシュによく使用され、もう 1 つは静的リソースのキャッシュによく使用されます。ここで、

オフライン ストレージ テクノロジについて簡単に説明します。

HTML5 は、localstorage と Application Cache という 2 つの主要なオフライン ストレージ テクノロジを提案しています。どちらも独自のアプリケーション シナリオを持っています。 練習の後、追加として、ローカルストレージには重要ではない Ajax データを保存する必要があると考えています。

アプリケーション キャッシュは静的リソースの保存に使用されますが、これは依然として追加です。 : ★(attilax)> ;>> ニックネーム: Laowa’s Claw (フルネーム: Attilax Akbar Al Rapanui アティラックス・アクバル・アル・ラパヌイ) 中国語名: Ailong、 EMAIL: 1466519819@qq.com

3 . : AppCache は主にオフライン アプリケーションに使用されるため、ホームページは確実にキャッシュされます。ホームページがキャッシュされていない場合、オフライン プラグインは使用できないため、index.html を NETWORK に追加しても効果はありません。

AppCache ファイル内

AppCache がリンクするページを明示的にリストする必要はありません。デフォルトでは、HTML 要素のマニフェスト属性を含むページはすべてキャッシュされるためです。これらの自動的にキャッシュされたページは main と呼ばれます。リストされたファイルは、詳細エントリと呼ばれます。一部のファイルがネットワークにリストされている場合は、ファイルのホワイトリストを作成できます。これらのファイルは、いつでもネットワーク経由でロードできます。

アプリケーション キャッシュを使用すると、Web サイトの読み込み速度が向上します。これは、主にリクエストの送信に反映され、ネットワーク遅延と http リクエストが効果的に削減されます。

さらに、マニフェスト ファイルの管理を適切に行う必要があります。マニフェスト内のファイルにアクセスできないことや、マニフェストの更新が時期尚早であることによって引き起こされる問題がいくつかあります。

html には、現在のページ

3.1 のマニフェスト ファイルを指定するために使用できるマニフェスト属性が追加されました。

Appcache イベント ポイントは、図

マニフェストに示すとおりです。ファイル

詳細は次のとおりです マニフェストの詳細について言えば、一般的なマニフェスト ファイルのコード構造は次のとおりです:

CACHE MANIFEST#version 1.3CACHE: test.cssNETWORK:*

マニフェスト ファイルの基本的な形式は次の 3 つです。セクション: CACHE、NETWORK、および FALLBACK。このうち NETWORK と FALLBACK はオプションです。

CACHE MANIFEST の最初の行は固定形式であり、前に記述する必要があります。

# で始まるコメントは、通常、2 行目にバージョン番号が書き込まれます。これは、キャッシュされたファイルが更新されたときにマニフェストの役割を変更するために使用されます。バージョン番号、タイムスタンプ、または md5 コードなどを指定できます。

マニフェストについて

まず、マニフェストの contentType = text/cache-manifest

そして、その拡張子は "

appcache"

3.3 を推奨します。

自動化ツール

マニフェスト ファイルのキャッシュ部分ではワイルドカードを使用できず、手動で指定する必要があります。ファイルが多すぎると、手動の作業になります。 (必須)

ロゴ どのファイルをキャッシュする必要があるかを決定します。相対パスまたは絶対パスを指定できます。

a.csshttp://yanhaijing.com/a.css ネットワーク: (オプション)

この部分は、キャッシュをバイパスして直接読み取られるファイルです。ワイルドカード* を使用できます。

次のコード「login.asp」はキャッシュされず、オフラインでは使用できません:

NETWORK:login.asp

FALLBACK: (オプション)

リソースにアクセスできない場合のフォールバック ページを指定します。ブラウザは使用します。このページ。このセクションの各レコードには 2 つの URI がリストされています。1 つ目はリソースを表し、2 つ目はフォールバック ページを表します。どちらの URI も相対パスを使用し、マニフェスト ファイルと同じ起点を持つ必要があります。ワイルドカード文字を使用できます。

以下の例では、インターネット接続を確立できない場合、「404.html」を使用して /html5/ ディレクトリ内のすべてのファイルが置き換えられます。

FALLBACK:/html5/ /404.html

以下の例では、「404.html」を使用してすべてのファイルを置き換えます。

FALLBACK:*.html /404.html

3.4. ページはオフラインです、ajax Updated

A まず、マニフェスト ファイルを変更してこのページを更新できますが、これについては紹介しません。ただし、記事のコンテンツ ページはオフラインになった後、同じ URL でアクセスすると、記事の内容に関係なくローカルに保存されます。データが更新されない場合、このオフライン ページは更新されません (マニフェスト ファイルを更新しない限り)。したがって、クライアントと同様に、ajax を使用してすべての動的データを取得し、オフライン ページはデータのない空のシェルにし、ajax を使用してデータをプルして空のシェルに埋める必要があります。次に、ajax のリクエスト アドレスをマニフェストのネットワークに書き込む必要があることに注意してください。それ以外の場合は、試してみてください。

3.5. ページのパラメータを保持し、JS 解析を使用する方法

たとえば、m.baidu.com/app?a=1&b=2、通常、このページにいくつかのパラメータをマークし、ページのコンテンツをレンダリングします。上記の方法では、パラメータが異なるとマニフェストが異なると考えられます。異なるパラメータは異なるページを表すと考えられます。コンテンツ ページを 1 つにすると

3.6. オフライン ページの更新ロングテール問題

Web サイトが更新され、ユーザーのローカルのオフライン ページが更新されたらどうなるでしょうか?多くの記事で説明されているように、まずファイルをオンラインにしてから、ページに紹介されているcache.manifest ファイルを変更します。たとえば、変更後にページに再度アクセスすると、マニフェストが検証されます。更新、更新がある場合は、ページを再度更新するとページが更新されます。

A. ロングテールの問題 前に述べたように、マニフェスト ファイルが更新されてページにアクセスすると、更新されたページを読み込む前に一度更新する必要があります。 -end データは、js ajax インターフェイスのデータです。データが変更されると、対応する js も変更されます。その後、マニフェストを変更してオンラインにすると、最初にページを開いたときにページにバグが発生します。もう一度ページを更新するだけで問題ありません。したがって、この最初の訪問のバグは、私たちが見たくないものです。また、ユーザーがいつ再びページにアクセスするかわからないため、マニフェストを使用してページがオフラインになると、クライアントと同じになるため、ロングテールの問題が発生します。幸いなことに、マニフェストには、更新されたファイルを判断してロードするために使用できるいくつかの js インターフェイスがあります。

B. ページを更新します

API コードをコピーします:

1. 1 現在のドキュメントに対応する applicationCache オブジェクト

2. ステータスを返す、cache.status 属性。現在のオフライン アプリケーションの情報

4. UNCACHED (値 0): オフライン アプリケーションは有効になっていません

5. IDLE (値 1): オフライン アプリケーションは有効ですが、ローカルにキャッシュされたリソースは最新であり、放棄されたリソースとしてマークされていません

6. チェック (値 2): アップデート キャッシュの現在のステータスは「チェック中」です

7. ダウンロード中 (値 3): アップデート キャッシュの現在のステータスは「リソースをダウンロード中」です

8. UPDATEREADY (値 4) : 更新キャッシュの現在のステータス「更新済み」

9. OBSOLETE (値 5): オフライン アプリケーションは開かれていますが、キャッシュ リソースは廃止としてマークされています

3.7. キャッシュを更新する方法

次の 3 つの方法でキャッシュを更新できます:

· マニフェスト ファイルを更新する

·

·

JavaScript で操作

·

·

ブラウザのキャッシュをクリアします

·

マニフェストにファイルを追加または削除してキャッシュを更新する場合、前の例のコメントにあるバージョン番号をマニフェストに更新することができます。ファイル。

HTML5 では、オフライン キャッシュを操作するための js メソッドが導入されており、次の js でローカル キャッシュを手動で更新できます。

window.applicationCache.update();

ユーザーが (手動または他のツールを使用して) ブラウザーのキャッシュをクリアすると、ファイルは再度ダウンロードされます。

3.8. Notes

·

ブラウザごとにキャッシュ データの容量制限が異なる場合があります (一部のブラウザでは、サイトごとに 5 MB の制限が設定されています)。

·

·

マニフェスト ファイル、または内部的にリストされているファイルを正常にダウンロードできない場合、更新プロセス全体が失敗し、ブラウザは古いキャッシュを使用し続けます。

·

·

マニフェストを参照する HTML は、マニフェスト ファイルと同じソースを持ち、同じドメイン内にある必要があります。

・

・

FALLBACK 内のリソースは、マニフェスト ファイルと同じオリジンを持つ必要があります。

・

・

リソースがキャッシュされると、ブラウザは絶対パスを直接リクエストし、キャッシュ内のリソースにもアクセスします。

・

・

サイト内の他のページにマニフェスト属性が設定されていない場合でも、要求されたリソースがキャッシュ内にあればキャッシュからアクセスされます。

·

·

マニフェスト ファイルが変更されると、リソース リクエスト自体が更新をトリガーします

1. 標準ではマニフェストを含むページのキャッシュが奨励されているため、実際には、マニフェスト ファイルを変更しなくても、マニフェストを含むページはマニフェスト キャッシュ リストにリストされ、このページもキャッシュされます。 したがって、HTTP 関連のキャッシュ ヘッダー フィールドと https キャッシュ ページの制限は、ユーザーの前で無視されます。つまり、HTTPS であってもオフラインで動作することができます。マニフェストは慎重に使用する - Tuiku.html

HTML5 アプリケーション キャッシュ - Ye Xiaochai - Blog Park.html