html5 アプリケーションのキャッシュと Web ワーカーの詳細なグラフィックとテキストの説明-H5 チュートリアル-php.cn

は、html5でアプリケーションcachingを導入しました。これは、Webアプリケーションをキャッシュできることを意味します。

アプリケーションキャッシュの利点

オフライン閲覧、ユーザーはオフライン中にロードおよびキャッシュされたデータを閲覧できます
ロード速度を向上させます
。
キャッシュを実装する

タグにマニフェスト属性を含める必要があります。マニフェストファイルの推奨拡張子は次のとおりです。

マニフェストファイル

マニフェストファイルは 3 つのキャッシュを提供します。メソッド:

version n.n: version は現在のマニフェストのバージョンを示します。バージョンが変更されると、ユーザーが再度ロードすると、CACHE タグの下にリストされているすべてのファイルが再度ダウンロードされます。 - キャッシュマニフェスト: この見出しの下にリストされているファイルは、最初のダウンロード後にキャッシュされます。

- ネットワーク: この見出しの下にリストされているファイルにはサーバーへのリンクが必要であり、キャッシュされません。

- F

ALL
BACK: このタイトルの下にリストされているファイルは、アクセスキャッシュが失敗した後にアクセスされるリソースを指定します。最初のファイルはアクセスソースで、2 番目のファイルは代替ファイル *.html /offline.html です。例
404 ページ
。
キャッシュされたアプリケーションここで、Web プロジェクトを作成し、新しい HTML ファイルを作成します: index.html

<!DOCTYPE html><html manifest="index.appcache">
  <head>
    <title>index.html</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
  </head> 
  <body>
    <h1>This is my HTML page</h1>
  </body></html>

ログイン後にコピー

style.css

@CHARSET "UTF-8";h1 {    color: aqua;}

ログイン後にコピー

ここでわかるように、私のページは非常にシンプルで、
スタイルを引用しています。 cssスタイルファイル。そして、

タグでは、キャッシュファイルindex.appcacheが指定されています。

index.appcacheの内容は次のとおりです:

CACHE MANIFEST#version 1.0CACHE:index.htmlcss/style.css

ログイン後にコピー

ここではCACHEタイプのキャッシュを使用していることがわかります。これは、インデックスをキャッシュする必要があることを意味します。 html および css/style.css ファイル。このとき、サーバーを開いて Web ページを参照すると、F12 キーを押して開発者向けオプションを開くと、次のキャッシュが表示されます。 <html>
NETWORK タイプキャッシュを使用して、これらのファイルをオンラインでダウンロードする必要があることを示すこともできます。ここでは、css/style.css ファイルを NETWORK タイプキャッシュに書き込みます。

CACHE MANIFEST#version 1.0CACHE:index.htmlNETWORK:css/style.css

ログイン後にコピー

まず、以前にキャッシュされたレコードを手動でクリアする必要があります。次に、サーバーを開いて http://localhost:8080/html5cache/index.html を参照します。表示効果は次のとおりです。
html5 アプリケーションのキャッシュと Web ワーカーの詳細なグラフィックとテキストの説明

この時点では HTML ページと css/style のみがキャッシュされていることがわかります。 css ファイルはキャッシュされていません。これにより、サーバーを閉じてページを再度更新すると、次のようになります:

この時点では HTML ページのみがロードされ、CSS ファイルはロードされていないことがわかります。 h1タグのがデフォルトです。
html5 アプリケーションのキャッシュと Web ワーカーの詳細なグラフィックとテキストの説明
キャッシュの更新
キャッシュを更新する必要がある場合、たとえば、ここでは HTML 内のテキストを変更し、再度 localhost:8080/html5cache/index.html にアクセスすると、最新のページテキストは更新されません。これは、ブラウザがデフォルトでキャッシュ内を検索するため、キャッシュ内にある場合はキャッシュから直接取得されるため、キャッシュファイル「index.appcache」のバージョンを更新する必要があります。

CACHE MANIFEST#version 1.1CACHE:css/style.cssindex.htmlNETWORK:FALLBACK:

ログイン後にコピー

ここで、バージョンを変更します。1.1に変更した後、再度ページにアクセスすると、最新のページをダウンロードするサービスに移動します。この時点で、キャッシュの欠点が出てきます。ページ内のテキストを 1 行だけ更新した場合でも、「index.appcache」ファイルのバージョン値を変更した後に、CACHE で定義されているすべてのコンテンツが再度ダウンロードされます。

jsを使用してキャッシュを自動更新します

さらに、applicationcache

オブジェクト

を使用してキャッシュを自動的に更新することもできます。以下の通り:

<script type="text/javascript">
         //添加页面加载函数
        window.addEventListener(&#39;load&#39;, function(e) {

          //为applicationCache对象添加updateready事件 
          window.applicationCache.addEventListener(&#39;updateready&#39;, function(e) {
            //表示manifest中列举的文件已经重新下载并更新成功
            if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {              
            //使用swapCache()方法更新到应用程序中
              window.applicationCache.swapCache();              
              if (confirm(&#39;A new version of this site is available. Load it?&#39;)) {                
              //重新加载当前页面
                window.location.reload();

              }

            } else {                //manifest文件没有变化
                console.log("manifest 没有改变");
            }

          }, false);

        }, false);    </script>

ログイン後にコピー

applicationcache は

window オブジェクト

の直接のサブオブジェクトです。このオブジェクトのイベントリストは次のとおりです:

status はキャッシュされた

status
を返します。

可选值	匹配常量	描述
0	appCache.UNCACHED	未缓存
1	appCache.IDLE	闲置
2	appCache.CHECKING	检查中
3	appCache.DOWNLOADING	下载中
4	appCache.UPDATEREADY	已更新
5	appCache.OBSOLETE	失效

方法

方法名	匹配常量
update()	发起应用程序缓存下载进程
abort()	取消正在进行的缓存下载
swapcache()	切换成本地最新的缓存环境

web workers

web workers是运行在后台的脚本，独立于其他的脚本，不会影响页面的性能。类似于android开发中的handler。将繁重耗时的计算放到web worker中来实现，然后将处理的结果返回给主UI线程来显示。

web workers方法

postMessage() :用于向html页面回传一段消息。
terminate() :终止web workers，并且释放计算机资源。

web workers简单实现

下面使用web workers简单实现一数字更新的demo：
新建一个web工程，创建index.html

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="index.js"></script></head><body>
    <p id="nump">0</p></body></html>

ログイン後にコピー

这里在index.html文件当中引入了index.js文件。
index.js

var nump;
window.onload = function(){
    nump = document.getElementById("nump");    var work = new Worker("count.js");
    work.onmessage = function(e) {
        //alert(e.data);
        nump.innerHTML = e.data;
    };
};

ログイン後にコピー

可以看到，这里讲更新数据的具体操作，使用Worker来更新，在worker当中加载了count.js文件来做一些耗时，复杂的计算。然后使用worker的onmessage回调方法，将count.js返回的结果重新显示给nump。
count.js

var countNum = 0;function count(){
    postMessage(countNum);//通过postMessage方法将计算结果回传给调用者
    countNum++;
    setTimeout(count,1000);
}
count();

ログイン後にコピー

count.js文件比较简单，每隔一秒更新countNum的值，然后回传给调用者，也就是这里的index.js

此时运行效果如下：
html5 アプリケーションのキャッシュと Web ワーカーの詳細なグラフィックとテキストの説明

下面添加一个开始停止的控制按钮：

 <button id="start">start</button>
 <button id="stop">stop</button>

ログイン後にコピー

index.js

var nump;var work;
window.onload = function(){
    nump = document.getElementById("nump");    
    var start = document.getElementById("start");    
    var stop = document.getElementById("stop");
    start.onclick = startWorker;
    stop.onclick = stopWorker;

};function startWorker() {
    if (work) { //如果work存在，则直接返回
        return;
    } else {
        work = new Worker("count.js");
        work.onmessage = function(e) {
            nump.innerHTML = e.data;
        };
    }
}function stopWorker() {
    if (work) {//如果worker存在，则终止并且为其重新赋值
        work.terminate();
        work = null;
    }
}

ログイン後にコピー

此时运行效果如下：
html5 アプリケーションのキャッシュと Web ワーカーの詳細なグラフィックとテキストの説明

另外我们还可以通过navaigator对象的onLine属性来判断当前浏览器是否在线，该属性属于只读属性，会返回boolean类型的值。

if(window.navigator.onLine) {    //在线} else {    //离线}

ログイン後にコピー

以上がhtml5 アプリケーションのキャッシュと Web ワーカーの詳細なグラフィックとテキストの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。