ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5-Web Worker API のコードの詳細説明

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

黄舟
黄舟オリジナル
2017-04-01 11:28:241556ブラウズ

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'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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。