IE10 の Web ワーカー: JavaScript のバックグラウンド処理による Web アプリケーションの高速化

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。 

【元記事】 Web Workers in IE10: Background JavaScript Makes Web Apps Faster (2011/7/2 8:33 AM)

応答性に優れた Web ページはユーザーに快適なエクスペリエンスをもたらします。

IE10 では、複雑な JavaScript アルゴリズムをオフロードしてバックグラウンドの “Web ワーカー” で実行することにより、Web アプリケーションの応答性が向上します。

たとえば、このテスト ドライブ (リンク ( 英語) ) では、Web ワーカーによって噴水の水の動きを計算する処理をオフロードし、ユーザーに表示されるメイン ページの応答性を高めています。

このデモは、IE10 Platform Preview 2 での Web ワーカーの使用例を示しています。

このデモで実行されたコードの詳細については、こちらのビデオ ( 英語) を参照してください。

この例 (リンク ( 英語) ) では、Web ワーカーによって ECMAScript テスト スイートの実行がどのように高速化されるかを確認できます。Web ワーカーを使用すると、ページ上のスクリプトは並列処理として実行され、ページ更新を妨げません。現在のプログラミング モデルを使用する場合に比べて処理時間を大幅に短縮できるため、Web アプリケーションの高速化に役立ちます。

IE10 Platform Preview 2 には、Web ワーカーをサポートするツールがすべて用意されています。F12 開発者ツールで提供されるスクリプト デバッグ用の既存のツールはすべて、Web ワーカーについても同様に機能し、シミュレートされた環境 (iframe を使用してワーカーをエミュレートした環境など) は必要ありません。たとえば、下の図のように、開発者はワーカー内のスクリプトを一時停止して、目的の WorkerGlobalScope 型オブジェクトを検査してデバッグできます。Web ワーカーに関するツールについては、次回の記事で詳しく説明します。

IE10 では、"チャネル メッセージング" もサポートされているため、複数の Web ワーカーは、元の Web ページで処理の調整が行われなくても、連携して動作することが可能です。前述のテストドライブで、[Use lighting effects (requires channel messaging)] というチェック ボックスをオンにすると、チャネル メッセージングの機能を試してみることができます。このチェック ボックスは Firefox では無効になります。現在、Firefox ではチャネル メッセージングがサポートされていないためです。

標準仕様に関して、IE10 Platform Preview 2 には、W3C の Web メッセージング仕様で既定されている関連機能 (前述のチャネル メッセージング)、HTML5 の仕様 ("構造化クローン アルゴリズム") と共に、W3C の Web ワーカー仕様に対する相互運用可能なサポートが含まれています。さらに、仕様の品質とブラウザーの実装を向上させる目的で、マイクロソフトは、IE Testing Center でこの仕様に関する 50 のテストを公開しています。

JavaScript のバックグラウンド処理により可能になる、新しい Web アプリケーションのシナリオ

Web ワーカーを活用することで、さまざまな新しい Web プログラミング シナリオを実現できます。たとえば、カジュアル ゲームでは、Web ワーカーでロジックを実行する "コンピューター プレーヤー" を相手にユーザーが順番にプレイするシナリオが可能になります。

Web ワーカーは、Web ページで、ページと並行して、バックグラウンドでスクリプトを実行する方法の 1 つです。実行時間が長く高負荷なスクリプトをメイン Web ページから分離させ、メッセージを通じてそれらのスクリプトと通信することにより、メイン Web ページの応答性を改善できます。

従来、Web アプリケーションでは、複雑な JavaScript アルゴリズムや実行時間の長い処理を避けていました。これらの処理によって、ユーザー タスクに対する Web ページの応答や、ページ上のコンテンツの更新がブロックされるためです。JavaScript が結果を出力せずに長時間実行されている場合、ユーザーに対する Web ページからの応答が遅くなり、極端な場合には Web ページがハングしたように見えます (IE9 におけるハング処理機能の強化について説明した記事でこの例が示されています)。Web ワーカーを使用すると、Web ページでのユーザー エクスペリエンスに対する影響を最小限に抑えながら、こうした複雑な JavaScript アルゴリズムを実行できるようになります。

さらに、Web ワーカーにより、MVC スタイルの Web ページ デザインも可能になります。MVC デザインの目的は、アプリケーションのモデルを、ビューおよびコントローラー (ユーザー入力) から分離することです。すべてのビジネス ロジック ("モデル") をワーカーで実行するように Web ページをデザインすれば、Web ページをビューとコントローラーのみで構成し、ユーザーへの応答性を維持することができます。

Web ワーカーは JavaScript の "スレッド" に似ていますが、他のプログラミング言語と比較すると、技術的な面でいくつかの相違点があります。Web ワーカーは Web ページと状態を共有せず、ロック、クリティカル セクション、セマフォ、ミューテックスなどの同期プリミティブを実装していません。また、Web ワーカーは通常 "寿命が長く"、独自のイベント ループを開始します。開始後は即座に終了することなく、追加の入力を待機します。

通常行うように、フィーチャー ディテクション方式で機能を検出し、まだ Web ワーカーをサポートしていないブラウザー (たとえば、モバイル デバイスのブラウザーなど) にサポートを追加してください。

if (window.Worker) {

/* このブラウザーで Web ワーカーを使用する */

}

Web ワーカーとプライバシー

マイクロソフトは、W3C ドラフト仕様に記載された共有ワーカーのデザイン (リンク ( 英語) ) に関するプライバシーの懸念 (リンク ( 英語) ) を、問題の解決方法の提案と共に W3C のワーキング グループに提示しています。単一ページ専用である通常のワーカーとは異なり、共有ワーカーには複数の Web ページが接続される場合があります。2 つの最上位ドメイン (銀行サイトと潜在的攻撃者、任意のサイトと潜在的トラッキング サイトなど) で無制限に Web ワーカーを共有できるようになれば、間違いなくプライバシー上の問題が発生するでしょう。マイクロソフトは、セキュリティ開発ライフサイクル (リンク ( 英語) ) へのコミットを継続すると共に、ユーザーが直面するセキュリティ上のリスクについて、確かな情報に基づく意思決定を行っています。

対話が続けられる中で、ユーザーのプライバシーにより配慮したデザインについてワーキング グループがコンセンサスを確立しつつあると、マイクロソフトは期待しています。

Web ワーカーの動作: "ミニ DOM" の利用

"ミニ DOM" は、Web ワーカーが Web ページから独立した状態を維持するための手段です。各ワーカーは、Web ページ本体および他のワーカーとは独立して動作できるように、独自の "ミニ DOM" を持っています。

次の図は、Web ページの DOM と Web ワーカーのミニ DOM を比較したものです。メイン Web ページと同様に、Web ワーカーには JavaScript エンジンに加えて、すべての標準的な JavaScript ライブラリ (数学関数、日付、配列など) が用意されています。ただし、メイン Web ページと異なり、Web ワーカーは Web ページの "ビュー" に関連する部分 (ウィンドウ、ドキュメント、要素、属性など) にはアクセスできません。代わりに、"ワーカー グローバル スコープ (WorkerGlobalScope)" オブジェクト ("self" プロパティを通じてアクセス可能) が用意されており、このオブジェクトに window オブジェクトの API の一部 ("setTimeout" や "postMessage" など) が含まれています。

開発者は、Web ワーカーを使用することにより、どの機能をオフロードすれば Web ページの応答性を維持しながら計算処理力を最大化できるかを、明確な根拠に基づいて判断できるようになります。

ぜひ IE10 Platform Preview 2 をダウンロードして、上で述べた Web ワーカーのデモ (リンク ( 英語) 、リンク ( 英語) ) をお試しになってください。皆様からのフィードバックをお待ちしています!

-Travis Leithead
IE プログラム マネージャー