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