フロントエンド性能最適化(Application Cache編)
14380 ワード
以前segmentfaultで問題をブラシしてmanifestに関する問題を見て、好奇心を持ってアプリケーションcacheを研究しました.Application CacheはHTML 5の新しい機能で、ブラウザがローカルにページを格納するために必要なリソースを許可し、ページがオフラインでもアクセスできるようにします.以前の研究の目的は、ブログで使用するために、変更する必要のないCSS、JavaScript、ピクチャファイルをオフラインキャッシュすることで、ロード速度が必然的に飛ぶので、ブログで使えるようにしたいのですが、失敗しましたが、学んだ知識を記録します.
Application Cacheのプロファイル
まず、サーバにファイルを作成する必要があります.その内容は、どのファイルがキャッシュされる必要があるのか、どのファイルが不要なのか、リソースがアクセスできない場合にどのページを使用するのかなどを決定します.
このファイルは一般的に
ファイルのヘッダ情報
CACHE部分
ヘッダ情報に加えて、このキャッシュ・インベントリ・ファイルはいくつかの部分に分けられ、第1の部分はCACHE部分です.
このセクションでは、キャッシュする必要があるリソースファイルについて説明します.複数のリソースファイルをリストできます.
パスがある場合は、blogの下のblogをキャッシュする必要がある.cssファイルは、
また、
NETWORK部
第2部はNETWORK部である.
このセクションでは、キャッシュを必要としないファイルを定義します.これらのファイルはサーバに接続する必要があります.
CACHEと同様に、複数のリソースを定義できますが、フォルダパスを直接入力すると、
ワイルドカードは、CACHEで定義したリソース以外はサーバに接続する必要があります.
このmanifestファイルを載せたHTMLドキュメントは必ずキャッシュされますので、後述します
FALLBACK部
第3部はFALLBACK部です.
このセクションでは、リソースがアクセスできない場合にブラウザが使用するバックアップページを指定します.
同様に複数のレコードを定義することができ、各レコードには2つのURIがリストされ、1つはリソースを表し、1つはバックアップページを表す.2つのリソースファイルは、相対パスカットを使用してmanifestファイルとソースを同じにする必要があることに注意してください.
ワイルドカードも使用できます
manifestファイルの保存と参照
manifestファイルはサーバに保存でき、
次のようなコードを使用するには、HTMLドキュメントにmanifestファイルを導入する必要があります.
これにより、HTMLドキュメントがロードするmanifestに従う.appcacheの内容はリソースファイルをキャッシュし、次回同じページにアクセスするときは、キャッシュされたリソースファイルを直接使用して加速します.
キャッシュとロードメカニズム
最初のアクセスでは、ブラウザがHTMLドキュメントをロードした後、manifestファイルが導入されているかどうかを確認します.導入するとmanifestファイルがロードされ、manifestのファイル内容に基づいてリソースのキャッシュが行われ、現在のドキュメントがキャッシュされます.
その後アクセスすると、ブラウザはまずmanifestファイルが変更されたか(コンテンツでもコメントでも)かどうかを確認し、変更された場合は最初のアクセスとしてmanifestファイルの内容に基づいてキャッシュします.
アプリケーションキャッシュが存在し、manifestが変更されていない場合、ブラウザはキャッシュからドキュメント(注:ドキュメントのロード)とリソースを直接ロードし、ネットワークにアクセスしません(注:ネットワークの有無にかかわらず、ネットワークにアクセスしません).
複数のリソースファイルをキャッシュする場合、ブラウザがリソースファイルをダウンロードすると、一時的なキャッシュに先に配置され、いずれかのリソースファイルのダウンロードに失敗した場合、ブラウザは他のキャッシュリソースのダウンロードを停止し、一時的なキャッシュをクリアします.すべてのリソースファイルが正常にダウンロードされると、ブラウザはこれらのリソースファイルとmanifestファイルを参照するHTMLドキュメントを永久オフラインキャッシュに移動します.
穴だらけ
いくつかの小さな穴
注意すべきはmanifestファイルがサーバ上に置かれていることであり、MIMEタイプは
キャッシュするページのhtmlごとにmanifestプロパティを追加する必要があります.
manifestファイル自体をキャッシュに追加しないでください.追加すると、ブラウザはサーバ上のmanifestの更新を検出しません.ページバージョンは万年変わらないでしょう.
リソースファイルのロードに失敗すると、他のファイルがキャッシュされるとは思わないでください.理由は、キャッシュとロードメカニズムの最後のを参照してください.
いくつかの大きな穴
manifestファイルで定義されたリソースがすべて正常にロードされると、これらのリソースファイルはmanifestファイルを参照するHTMLドキュメントとともに永久オフラインキャッシュに移動されます.したがって、js、css、ピクチャなどのファイルのみをキャッシュし、最新のコンテンツを取得するためにHTMLドキュメントをキャッシュしたくない場合、これは大きな穴である.
Application Cacheのロードメカニズムに従って、リソースファイルの内容(リソースファイルのパスまたは名前を変更していない)のみを変更すると、ブラウザはローカルオフラインキャッシュからリソースファイルを直接取得します.したがって、リソースファイルを変更するたびにmanifestファイルを変更して、リソースファイルの再ロードとキャッシュをトリガーする必要があります.このうち、最も効果的な方法はmanifestファイル内部のバージョン注釈(したがって、その注釈はかなり重要)を修正することです.
リソースがキャッシュされておらず、NETWORKが設定されていない場合はロードできません(ブラウザはネットワーク上にロードしません)ので、CACHEで特定されたリソース以外はネットワーク上にをロードする必要があることをワイルドカードで示す必要があります.
iframeを使って1番の穴を避けますか?
ネット上では、iframeを使用してキャッシュするリソースを指定し、HTMLドキュメントのキャッシュを避ける方法が噂されています.具体的には、HTMLにiframeを埋め込み、iframeのページのHTMLラベルにはmanifestプロパティリファレンスmanifestファイルが含まれており、キャッシュするファイルが定義されています.これにより、iframeのHTMLドキュメントのみがキャッシュされ、ホームページの更新が継続されます.
ホームページのhtmlラベルにはmanifestファイルが導入されていないことがわかります.iframeがロードされているだけで、このiframeがロードされているページドキュメントは次のとおりです.
キャッシュページにmanifestファイルが導入され、ブラウザはmanifestファイルで定義されたリソースのリストをキャッシュします.たとえば、ここでmanifestファイルの内容は次のとおりです.
chromeで実行すると、コマンドラインに次のような効果が表示されます.
ブラウザはmanifestファイルで定義されたリソースファイルをキャッシュし、iframeのキャッシュページのドキュメントもキャッシュしていますが、ホームフェースはキャッシュされません.ホームフェースを変更し、F 5でリフレッシュします.
ホームページが更新されているのが見えますが、someStyle.cssとsomeJavaScript.jsファイルはcacheからロードされずにネットワークからロードされます.chromeの
firefox、operaでのテストも同様で、キャッシュされていますが、やはりネットからロードされますが、iframeの解答方法も2011~2012年頃に提出されたもので、その後は関連記事がなく、完全に失効したと推定されます
まとめ
Applicationは、主にオフラインキャッシュを構築し、オフラインモードでもページを閲覧できるようにするためです.これは、いくつかのページ上のアプリケーションや、静的で頻繁に変更されないページに適しています.キャリアページがキャッシュされるのも、そのメカニズムによるものです.
Application Cacheのプロファイル
まず、サーバにファイルを作成する必要があります.その内容は、どのファイルがキャッシュされる必要があるのか、どのファイルが不要なのか、リソースがアクセスできない場合にどのページを使用するのかなどを決定します.
このファイルは一般的に
.appcacheタイプで、キャッシュリスト(cache manifest)ファイルと呼ばれ、完全なキャッシュリストファイルは以下の通りです.CACHE MANIFEST
# version xx.xx.xx
CACHE:
needBeCached.png
needBeCached2.js
NETWORK:
notNeedBeCached.html
notNeedBeCached2.css
FALLBACK:
/ 404.html
ファイルのヘッダ情報
CACHE MANIFESTは、このファイルがキャッシュ・インベントリ・ファイルであることを示すために使用され、その後、一般的には(好ましくは)1行の注釈バージョンの注釈が続く.この行の注釈は非常に重要であり、この行の注釈の重要性は後述するファイル・ロード・セクションで詳細に説明されるCACHE部分
ヘッダ情報に加えて、このキャッシュ・インベントリ・ファイルはいくつかの部分に分けられ、第1の部分はCACHE部分です.
CACHE:
needBeCached.png
needBeCached2.js
このセクションでは、キャッシュする必要があるリソースファイルについて説明します.複数のリソースファイルをリストできます.
パスがある場合は、blogの下のblogをキャッシュする必要がある.cssファイルは、
blog/blog.cssと書くことができます.また、
CACHE:は、キャッシュが必要なリソースファイルがコメントの後に直接続くように省略することができるNETWORK部
第2部はNETWORK部である.
NETWORK:
notNeedBeCached.html
notNeedBeCached2.css
このセクションでは、キャッシュを必要としないファイルを定義します.これらのファイルはサーバに接続する必要があります.
CACHEと同様に、複数のリソースを定義できますが、フォルダパスを直接入力すると、
/blogのように、blogフォルダの下のすべてのファイルがキャッシュされません.ワイルドカードは、CACHEで定義したリソース以外はサーバに接続する必要があります.
NETWORK:
* このmanifestファイルを載せたHTMLドキュメントは必ずキャッシュされますので、後述します
FALLBACK部
第3部はFALLBACK部です.
FALLBACK:
/ 404.html
このセクションでは、リソースがアクセスできない場合にブラウザが使用するバックアップページを指定します.
同様に複数のレコードを定義することができ、各レコードには2つのURIがリストされ、1つはリソースを表し、1つはバックアップページを表す.2つのリソースファイルは、相対パスカットを使用してmanifestファイルとソースを同じにする必要があることに注意してください.
ワイルドカードも使用できます
manifestファイルの保存と参照
manifestファイルはサーバに保存でき、
.appcache接尾辞として保存できますが、アプリケーション自体と同源である必要があります.HTMLドキュメントでは、インベントリファイルの相対パスと絶対URLを指定できます.なお、manifestファイルのMIMEタイプはtext/cache-manifestでなければならない次のようなコードを使用するには、HTMLドキュメントにmanifestファイルを導入する必要があります.
<!doctype html>
<html manifest="manifest.appcache">
...
</html>
これにより、HTMLドキュメントがロードするmanifestに従う.appcacheの内容はリソースファイルをキャッシュし、次回同じページにアクセスするときは、キャッシュされたリソースファイルを直接使用して加速します.
キャッシュとロードメカニズム
最初のアクセスでは、ブラウザがHTMLドキュメントをロードした後、manifestファイルが導入されているかどうかを確認します.導入するとmanifestファイルがロードされ、manifestのファイル内容に基づいてリソースのキャッシュが行われ、現在のドキュメントがキャッシュされます.
その後アクセスすると、ブラウザはまずmanifestファイルが変更されたか(コンテンツでもコメントでも)かどうかを確認し、変更された場合は最初のアクセスとしてmanifestファイルの内容に基づいてキャッシュします.
アプリケーションキャッシュが存在し、manifestが変更されていない場合、ブラウザはキャッシュからドキュメント(注:ドキュメントのロード)とリソースを直接ロードし、ネットワークにアクセスしません(注:ネットワークの有無にかかわらず、ネットワークにアクセスしません).
複数のリソースファイルをキャッシュする場合、ブラウザがリソースファイルをダウンロードすると、一時的なキャッシュに先に配置され、いずれかのリソースファイルのダウンロードに失敗した場合、ブラウザは他のキャッシュリソースのダウンロードを停止し、一時的なキャッシュをクリアします.すべてのリソースファイルが正常にダウンロードされると、ブラウザはこれらのリソースファイルとmanifestファイルを参照するHTMLドキュメントを永久オフラインキャッシュに移動します.
穴だらけ
いくつかの小さな穴
注意すべきはmanifestファイルがサーバ上に置かれていることであり、MIMEタイプは
text/cache-manifestである必要があり、Apacheを使用する場合は修正が必要である.htaccessファイル.IE下のデフォルトアプリケーション/octet-streamは、サーバでを指定する必要があります.キャッシュするページのhtmlごとにmanifestプロパティを追加する必要があります.
manifestファイル自体をキャッシュに追加しないでください.追加すると、ブラウザはサーバ上のmanifestの更新を検出しません.ページバージョンは万年変わらないでしょう.
リソースファイルのロードに失敗すると、他のファイルがキャッシュされるとは思わないでください.理由は、キャッシュとロードメカニズムの最後のを参照してください.
いくつかの大きな穴
manifestファイルで定義されたリソースがすべて正常にロードされると、これらのリソースファイルはmanifestファイルを参照するHTMLドキュメントとともに永久オフラインキャッシュに移動されます.したがって、js、css、ピクチャなどのファイルのみをキャッシュし、最新のコンテンツを取得するためにHTMLドキュメントをキャッシュしたくない場合、これは大きな穴である.
Application Cacheのロードメカニズムに従って、リソースファイルの内容(リソースファイルのパスまたは名前を変更していない)のみを変更すると、ブラウザはローカルオフラインキャッシュからリソースファイルを直接取得します.したがって、リソースファイルを変更するたびにmanifestファイルを変更して、リソースファイルの再ロードとキャッシュをトリガーする必要があります.このうち、最も効果的な方法はmanifestファイル内部のバージョン注釈(したがって、その注釈はかなり重要)を修正することです.
リソースがキャッシュされておらず、NETWORKが設定されていない場合はロードできません(ブラウザはネットワーク上にロードしません)ので、CACHEで特定されたリソース以外はネットワーク上にをロードする必要があることをワイルドカードで示す必要があります.
iframeを使って1番の穴を避けますか?
ネット上では、iframeを使用してキャッシュするリソースを指定し、HTMLドキュメントのキャッシュを避ける方法が噂されています.具体的には、HTMLにiframeを埋め込み、iframeのページのHTMLラベルにはmanifestプロパティリファレンスmanifestファイルが含まれており、キャッシュするファイルが定義されています.これにより、iframeのHTMLドキュメントのみがキャッシュされ、ホームページの更新が継続されます.
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title> </title>
<link rel="stylesheet" href="css/style.css">
<script src="js/javascript.js"></script>
</head>
<body>
<iframe src="cache.html"></iframe>
</body>
</html>
ホームページのhtmlラベルにはmanifestファイルが導入されていないことがわかります.iframeがロードされているだけで、このiframeがロードされているページドキュメントは次のとおりです.
<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
<meta charset=utf-8 />
<title> </title>
</head>
<body>
</body>
</html>
キャッシュページにmanifestファイルが導入され、ブラウザはmanifestファイルで定義されたリソースのリストをキャッシュします.たとえば、ここでmanifestファイルの内容は次のとおりです.
CACHE MANIFEST
# VERSION 1.0
CACHE:
css/someStyle.css
js/someJavaScript.js
NETWORK:
*
chromeで実行すると、コマンドラインに次のような効果が表示されます.
Creating Application Cache with manifest http://localhost:8000/manifest.appcache
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 2) http://localhost:8000/css/someStyle.css
Application Cache Progress event (1 of 2) http://localhost:8000/js/someJavaScript.js
Application Cache Progress event (2 of 2)
Application Cache Cached event
ブラウザはmanifestファイルで定義されたリソースファイルをキャッシュし、iframeのキャッシュページのドキュメントもキャッシュしていますが、ホームフェースはキャッシュされません.ホームフェースを変更し、F 5でリフレッシュします.
Document was loaded from Application Cache with manifest http://localhost:8000/manifest.appcache
Application Cache Checking event
Application Cache NoUpdate event
ホームページが更新されているのが見えますが、someStyle.cssとsomeJavaScript.jsファイルはcacheからロードされずにネットワークからロードされます.chromeの
chrome://appcache-internals/を開けると、中にcacheが見えます.html、someStyle.css、someJavaScript.jsは確かにキャッシュされているので、NETWORKセグメントを削除しても結果は同じですFlags URL Size (headers and data)
Master, http://localhost:8000/cache.html 388 B
Explicit, http://localhost:8000/css/someStyle.css 228 B
Explicit, http://localhost:8000/js/someJavaScript.js 244 B
Manifest, http://localhost:8000/manifest.appcache 316 B
firefox、operaでのテストも同様で、キャッシュされていますが、やはりネットからロードされますが、iframeの解答方法も2011~2012年頃に提出されたもので、その後は関連記事がなく、完全に失効したと推定されます
まとめ
Applicationは、主にオフラインキャッシュを構築し、オフラインモードでもページを閲覧できるようにするためです.これは、いくつかのページ上のアプリケーションや、静的で頻繁に変更されないページに適しています.キャリアページがキャッシュされるのも、そのメカニズムによるものです.