Web Workers API

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 の仕様にあるように、Worker のエラーイベントはバブルするべきではありません (see バグ 1188141。これは Firefox 42 で実装されました。

Web Worker インタフェース

AbstractWorker
Worker や SharedWorker など、すべての Worker に共通な抽象オブジェクトです。
Worker
実行している Worker のスレッドを表します。実行している Worker  のコードへメッセージを送る際に用います。
SharedWorker
利用している複数のコンテキストから「アクセス可能な」 Worker を表します。コンテキストは複数の window、iframe、Worker からなります。
WorkerGlobalScope
Window のように通常の Web コンテンツと同じ動作をする Worker の一般的なスコープを表します。これと異なる種類の Worker は、このインタフェースに独自の機能をいくつか加えたスコープを持ちます。
DedicatedWorkerGlobalScope
Dedicated Worker のスコープを表します。WorkerGlobalScope を継承しており、独自の機能がいくつか加えられています。
SharedWorkerGlobalScope
Shared Worker のスコープを表します。WorkerGlobalScope を継承しており、独自の機能がいくつか加えられています。
WorkerNavigator
ユーザエージェント(クライアント)に関する識別名と状態を表します。

使用例

簡単なデモと基本的な使い方は以下を参照してください。

このデモの動く仕組みを詳しく知りたい場合は 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と同じ。


関連情報

ドキュメントのタグと貢献者

 このページの貢献者: hamasaki, clariroid
 最終更新者: hamasaki,