検索
ホームページウェブフロントエンドH5 チュートリアルhtml5 アプリケーションのキャッシュと Web ワーカーの詳細なグラフィックとテキストの説明


は、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 id="This-nbsp-is-nbsp-my-nbsp-HTML-nbsp-page">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 キーを押して開発者向けオプションを開くと、次のキャッシュが表示されます。
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 ワーカーの詳細なグラフィックとテキストの説明
キャッシュの更新
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 サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
H5:ウェブ上のユーザーエクスペリエンスをどのように強化するかH5:ウェブ上のユーザーエクスペリエンスをどのように強化するかApr 19, 2025 am 12:08 AM

H5は、マルチメディアサポート、オフラインストレージ、パフォーマンスの最適化により、Webユーザーエクスペリエンスを向上させます。 1)マルチメディアサポート:H5と要素は、開発を簡素化し、ユーザーエクスペリエンスを向上させます。 2)オフラインストレージ:WebStorageとIndexEdDBは、エクスペリエンスを改善するためにオフラインで使用できるようにします。 3)パフォーマンスの最適化:ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。

H5コードの分解:タグ、要素、属性H5コードの分解:タグ、要素、属性Apr 18, 2025 am 12:06 AM

HTML5コードは、タグ、要素、属性で構成されています。1。タグはコンテンツタイプを定義し、などの角度ブラケットに囲まれています。 2。要素は、startタグ、内容、および内容などのエンドタグで構成されています。 3。属性は、開始タグのキー値のペアを定義し、ような関数を強化します。これらは、Web構造を構築するための基本ユニットです。

H5コードの理解:HTML5の基礎H5コードの理解:HTML5の基礎Apr 17, 2025 am 12:08 AM

HTML5は、最新のWebページを構築するための重要なテクノロジーであり、多くの新しい要素と機能を提供します。 1。HTML5は、Webページの構造とSEOを強化するなどのセマンティック要素を導入します。 2。プラグインなしのマルチメディア要素と埋め込みメディアをサポートします。 3.フォームは、新しい入力タイプと検証プロパティを強化し、検証プロセスを簡素化します。 4.オフラインおよびローカルストレージ機能を提供して、Webページのパフォーマンスとユーザーエクスペリエンスを向上させます。

H5コード:Web開発者向けのベストプラクティスH5コード:Web開発者向けのベストプラクティスApr 16, 2025 am 12:14 AM

H5コードのベストプラクティスには以下が含まれます。1。正しいDoctype宣言と文字エンコーディングを使用します。 2。セマンティックタグを使用します。 3。HTTPリクエストを削減します。 4.非同期負荷を使用します。 5。画像を最適化します。これらのプラクティスは、Webページの効率、保守性、ユーザーエクスペリエンスを向上させることができます。

H5:Web標準とテクノロジーの進化H5:Web標準とテクノロジーの進化Apr 15, 2025 am 12:12 AM

Web標準とテクノロジーは、これまでにHTML4、CSS2、および単純なJavaScriptから進化し、重要な開発を受けてきました。 1)HTML5は、CanvasやWebstorageなどのAPIを導入し、Webアプリケーションの複雑さと互換性を高めます。 2)CSS3はアニメーション関数とトランジション関数を追加して、ページをより効果的にします。 3)JavaScriptは、矢印関数やクラスなど、node.jsおよびES6の最新の構文を通じて開発効率とコードの読みやすさを向上させます。これらの変更により、パフォーマンスの最適化とWebアプリケーションのベストプラクティスの開発が促進されました。

H5はHTML5の速記ですか?詳細の調査H5はHTML5の速記ですか?詳細の調査Apr 14, 2025 am 12:05 AM

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5およびHTML5:Web開発で一般的に使用される用語H5およびHTML5:Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5は何を参照していますか?コンテキストの探索H5は何を参照していますか?コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1)html5introduceSnewelementsandapisforrich、dynamicwebapplications.2)Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3)semanticelementsimprovecontentstructurendseo.4)H5'srespo

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。