Webワーカーの概要

wp-admin

9年前

Webワーカーの基本的な概要について確認し、サンプルコードを作成してみました。

（１）Webワーカーの概要

　
●JavaScriptの並行処理の問題点
　
・JavaScriptは単一スレッド環境であり、複数のスクリプトを同時に実行することはできない。
例えば、一つのイベントハンドラーが実行中はイベントのタイマーをトリガーできない。
　
●Web Worker API
　
・Webワーカーは、WindowやDocumentオブジェクトへのアクセスではなく、スレッド形式のメッセージパッシングによって並列性が実現している。
　
・同時にDOMを更新するような操作はできないが、UIや他のスクリプトによるユーザーインタラクションの処理をブロックすることなく、長時間実行のタスクの処理などができるようになる。
　
・Webワーカーの仕様には、専用ワーカーと共有ワーカーの２種類がある。
　
※・専用ワーカー
※・共有ワーカー
　

（２）Webワーカーを使った簡単なサンプルを作成

　
●サンプルコード

（HTML）
<script>
var worker = new Worker('worker1.js');
worker.onmessage = function (event) {
  document.body.innerHTML +=
  "<p>バックグラウンドのスレッドからのメッセージ: " + event.data + "</p>";
};
</script>
<body>
<div class="container">
  <strong>Workerの実行テスト</strong>
</div>
</body>
　
（worker1.js）
postMessage('開始');
for(i = 1 ; i 
　

●サンプルコードの説明

　

①バックグラウンドスレッドを別ファイルで定義（worker1.js）

　

・Webワーカーは独立したスレッドで動作するので、Webワーカーによって実行されるコードは個別のファイルに格納する必要がある。

　

②メインファイルでWorkerオブジェクト作成

　

var worker = new Worker('worker1.js');

　

・指定されたファイルが存在する場合、ブラウザは新しいワーカースレッドを生成する。

・このスレッドは非同期でダウンロードされる。

・ファイルのダウンロードが完了してファイルが実行されるまで、ワーカーは開始されない。

　

③メッセージパッシングによりワーカーと通信

　

・ワーカーはpostMessage()メソッドを使ってデータを送信する事が出来る。

　postMessage()メソッドに渡されたデータはコピーされ、コピーされたデータはメッセージイベントを介してWorkerオブジェクトに渡される。

　

※この例では、onmessageイベントで送信されたデータを受け取っている。