HTML5-Web Worker API のコードの詳細説明-H5 チュートリアル-php.cn

HTML5-Web Worker API のコードの詳細説明

黄舟

リリース： 2017-04-01 11:28:24

オリジナル

1578 人が閲覧しました

1. 概要
HTML5 Web Worker を使用すると、Javascript プログラムがバックグラウンドで単一のスレッドで時間のかかる計算タスクを多数実行できるようになります。 Web ワーカーは、実行中に DOM に直接アクセスできません。 Web ワーカーは CPU とシステムリソースも消費します。 Web ワーカーとページ間の通信は、Web ワーカーのメソッド postMessage および messageevent を通じて行うことができます。

2. ブラウザは検出をサポートします

 function loadDemo() 
   { 
      
if
 (typeof(Worker) !== "undefined") 
      { 
         
document
.getElementById("support").innerHTML =  
            "Excellent! Your browser supports HTML5 Web Workers"; 
      } 
   }

ログイン後にコピー

3.worker オブジェクト
ワーカーオブジェクトは、window オブジェクトのサブオブジェクトです。次のメソッドがあります:
•Worker(jsFile_URL): コンストラクター、パラメーター。 Web Worker タスクの実行に使用される JavaScript ファイルの URL アドレス。相対アドレスまたは絶対アドレスを指定できます。ワーカーは再帰的に作成できます。ページ上で呼び出されます。
•terminate(): ワーカーを終了します。終了後は再利用できず、再構築のみ可能です。
ページからお問い合わせください。
•close(): ワーカー内で呼び出され、ワーカーを終了します。
•importScripts(jsFile_1_URL, jsFile_2_URL, ...): JavaScript ファイルを既存のワーカーに非同期にインポートします。JavaScript はパラメータの順序で実行されます。 Worker スクリプト内で呼び出されます。
•postMessage(msg): ワーカーのページとワーカーの間の通信メソッドを作成します。例:

    // -------------由页面向worker
发送消息
------------------
      document.getElementById("helloButton").
onclick
 = function() { 
         worker.postMessage("Here&#39;s a message 
for
 you"); 
      }
      // -------------页面接收来自worker的消息----------------      
      worker.addEvent
List
ener("message", messageHan
dl
er, true); 
      function messageHandler(e) { 
         // process message from worker 
      } 
      // -------------JavaScript
文件处理
来自页面的消息----------------
      addEventListener("message", messageHandler, true);
      function messageHandler(e) { 
         postMessage("worker says: " + e.data + " too"); 
      }

ログイン後にコピー

4.エラー処理

 // -------------在页面处理来自worker的消息----------------
   worker.addEventListener("error", errorHandler, true);
   function errorHandler(e) { 
      console.log(e.message, e); 
   }

ログイン後にコピー

5 ワーカーは DOM に直接アクセスできませんが、timer
を使用します。オブジェクトですが、ウィンドウオブジェクトの時間関連のメソッドとプロパティを完全に使用でき、また、他のいくつかのプロパティも使用できます。例:

rree

以上がHTML5-Web Worker API のコードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。