ホームページ > 記事 > ウェブフロントエンド > HTML5-Web Worker API のコードの詳細説明
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
を使用します。オブジェクトですが、ウィンドウ オブジェクトの時間関連のメソッドとプロパティを完全に使用でき、また、他のいくつかのプロパティも使用できます。例:
以上がHTML5-Web Worker API のコードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。