Web Worker とは、Web アプリケーションにおけるスクリプトの処理をメインとは別のスレッドに移し、バックグラウンドでの実行を可能にする仕組みのことです。時間のかかる処理を別のスレッドに移すことが出来るため、UI を担当するメインスレッドの処理を中断・遅延させずに実行できるという利点があります。
Web Worker の概念と使い方
Worker オブジェクトは Worker() などのコンストラクタで生成されるオブジェクトで、名前を持つ JavaScript ファイルを実行します。Worker のスレッドで実行されるコードはこのファイルに書かれており、今いる window とは別のグローバルなコンテキストの中で Worker がコードを実行します。Dedicated Worker（専用ワーカー）の場合、そのコンテキストは DedicatedWorkerGlobalScope オブジェクトで表現されます（通常の Worker は単一のスクリプトで使用されますが、Worker を共有する際は SharedWorkerGlobalScope を使用します）。
Worker のスレッドではあらゆるコードを実行できますが、いくつか例外があります。例えば、Worker から DOM を直接操作することは出来ません。また、window にデフォルトで用意されているメソッドやプロパティには Worker から使用できないものもあります。しかし、WebSockets や IndexedDB のようなデータストレージに加え、Firefox OS における Data Store API など、window に含まれていても使用できるものは数多くあります。詳しくは Worker から使用できる関数とクラス を参照してください。
Worker とメインスレッドとの間では、メッセージのシステムを通してデータがやり取りされます。両者は postMessage() メソッドを使ってメッセージを送信し、受け取ったメッセージには onmessage イベントハンドラで返信します（メッセージは Message イベントの data 属性に格納されます）。なお、送信したデータは受取先でコピーされます（共有ではありません）。
メインスレッドのページと同じオリジンであれば、Web Workers は新しい Worker をいくつでも生成できます。また、Worker はネットワーク I/O において XMLHttpRequest を使用しますが、XMLHttpRequest における responseXML と channel 属性は必ず null を返す点で通常と異なります。
Dedicated Worker の他にも、Worker の種類には以下のようなものがあります。
- Shared Worker（共有ワーカー）は、iframe などの異なる window で実行されている複数のスクリプトから利用できる Worker です。それらのスクリプトと Worker は同じドメイン内にある必要があります。スクリプトどうしがアクティブなポートで通信しなければならないので、Dedicated Worker よりも少し複雑です。詳しくは
SharedWorkerを参照してください。 - ServiceWorker は、複数の Web アプリケーション間やブラウザ、（利用可能なら）ネットワークとの間でプロキシサーバとして動くものです。他の Worker とは異なり、Service Worker はオフラインでのユーザエクスペリエンスを実現するために設計されています。ネットワークへのリクエストに割り込み、オンライン・オフラインそれぞれの場合に適した結果をユーザに返します。また、サーバ上のリソースの更新も担います。Service Worker を使うことで、プッシュ通知やバックグラウンド同期の API も利用可能になります。
- Chrome Worker は Firefox 上でのみ使える Worker です。アドオンの開発時、拡張機能で Web Workers を使いたいとき、または Worker の中で js-ctypes を使いたいときに用いることが出来ます。詳しくは
ChromeWorkerを参照してください。 - Audio Worker は、音声処理を Worker のコンテキスト内でスクリプトで直接実行する能力を提供します。
Web Worker インタフェース
AbstractWorkerWorkerやSharedWorkerなど、すべての Worker に共通な抽象オブジェクトです。Worker- 実行している Worker のスレッドを表します。実行している Worker のコードへメッセージを送る際に用います。
SharedWorker- 利用している複数のコンテキストから「アクセス可能な」 Worker を表します。コンテキストは複数の window、iframe、Worker からなります。
WorkerGlobalScopeWindowのように通常の Web コンテンツと同じ動作をする Worker の一般的なスコープを表します。これと異なる種類の Worker は、このインタフェースに独自の機能をいくつか加えたスコープを持ちます。DedicatedWorkerGlobalScope- Dedicated Worker のスコープを表します。
WorkerGlobalScopeを継承しており、独自の機能がいくつか加えられています。 SharedWorkerGlobalScope- Shared Worker のスコープを表します。
WorkerGlobalScopeを継承しており、独自の機能がいくつか加えられています。 WorkerNavigator- ユーザエージェント（クライアント）に関する識別名と状態を表します。
使用例
簡単なデモと基本的な使い方は以下を参照してください。
- Basic dedicated worker example (run dedicated worker).
- Basic shared worker example (run shared worker).
このデモの動く仕組みを詳しく知りたい場合は Web Worker を使用する を参照してください。
仕様
| 仕様 | 状況 | 備考 |
|---|---|---|
| WHATWG HTML Living Standard | 現行の標準 | Web Workersより変更なし |
| Web Workers | 勧告改訂案 | 最初の定義 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 標準サポート | 4 | Unknown (3.5) | 10.0 | 10.6 | 4 |
| Shared Worker | 4 | 29 (29) | 未サポート | 10.6 | 4 |
| structured cloning によるデータ交換 | 13 | 8 (8) | 10.0 | 11.5 | 6 |
| transferable objects によるデータ交換 | 17 webkit 21 |
18 (18) | 未サポート | 15 | 6 |
グローバル URL |
10[1] 23 |
21 (21) | 11 | 15 | 6[1] |
| 機能 | Android | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| 標準サポート | 4.4 | 4 | 1.0 (1.9.1) | 1.0.1 | 10.0 | 11.5 | 5.1 |
| Shared Worker | 未サポート | 4 | 29 | 1.4 | 未サポート | 未サポート | 未サポート |
| structured cloning によるデータ交換 | 未サポート | 4 | 8 | 1.0.1 | 未サポート | 未サポート | 未サポート |
| transferable objects によるデータ交換 | 未サポート | 未サポート | 18 | 1.0.1 | 未サポート | 未サポート | 未サポート |
[1] webkitURLと同じ。
関連情報
- Web Worker を使用する
- Worker Interface
- SharedWorker interface
- ServiceWorker API
- Worker から使用できる関数とクラス
- Advanced concepts and examples
- ChromeWorker: Web Worker を privileged/chrome code で使う場合