Webワーカーの概要

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

(1)Webワーカーの概要


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

(2)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 < 11;i++) {
  postMessage(i + "回目のメッセージ送信");
}
postMessage('終了');

●サンプルコードの説明
 
①バックグラウンドスレッドを別ファイルで定義(worker1.js)
 
・Webワーカーは独立したスレッドで動作するので、Webワーカーによって実行されるコードは個別のファイルに格納する必要がある。
 
②メインファイルでWorkerオブジェクト作成
 
var worker = new Worker('worker1.js');
 
・指定されたファイルが存在する場合、ブラウザは新しいワーカースレッドを生成する。
 
・このスレッドは非同期でダウンロードされる。
 
・ファイルのダウンロードが完了してファイルが実行されるまで、ワーカーは開始されない。
 
③メッセージパッシングによりワーカーと通信
 
・ワーカーはpostMessage()メソッドを使ってデータを送信する事が出来る。
 
postMessage()メソッドに渡されたデータはコピーされ、コピーされたデータはメッセージイベントを介してWorkerオブジェクトに渡される。
 
※この例では、onmessageイベントで送信されたデータを受け取っている。

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です