Loading article…
| 状態 | 生活水準 |
|---|---|
| 開始年 | 2009年4月3日 |
| 初版 | 2009年4月3日 |
| 組織 | |
| 委員会 | 何ですか |
| 編集者 | イアン・ヒクソン |
| ドメイン | |
| Webサイト |
|
ウェブワーカーは、ワールドワイドウェブコンソーシアム（W3C）とウェブハイパーテキストアプリケーション技術ワーキンググループ（WHATWG）によって定義されているように、同じHTMLページから実行されたスクリプトとは独立してバックグラウンドで実行されるHTMLページから実行されるJavaScript スクリプトです。[1]ウェブワーカーは、多くの場合、マルチコアCPUをより効率的に利用できます。[2]
W3C と WHATWG は、Web ワーカーを、クリックやその他のユーザー操作に応答するスクリプトによって中断されない、長時間実行されるスクリプトとして想定しています。このようなワーカーがユーザー アクティビティによって中断されないようにすることで、バックグラウンドで長時間のタスクを実行している間も、Web ページが応答し続けるようになります。
Webワーカー仕様はHTML Living Standardの一部です。[1]
概要
WHATWGが想定しているように、Webワーカーは比較的重いため、大量に使用することは想定されていません。Webワーカーは長期間稼働することが予想され、起動時のパフォーマンスコストが高く、インスタンスあたりのメモリコストも高くなります。[1]
Web ワーカーは HTML ドキュメントのスクリプトのコンテキスト外で実行されます。そのため、DOMにアクセスすることはできませんが、 JavaScript プログラムの 同時実行が可能になります。
特徴
Web ワーカーは、メッセージ パッシングを介してメイン ドキュメントと対話します。次のコードは、指定されたファイル内の JavaScript を実行するワーカーを作成します。
varワーカー=新しいワーカー( "worker_script.js" );
ワーカーにメッセージを送信するには、postMessage次に示すようにワーカー オブジェクトのメソッドを使用します。
ワーカー. postMessage ( "Hello World!" );
このonmessageプロパティは、イベント ハンドラーを使用してワーカーから情報を取得します。
worker.onmessage = function ( event ) { alert ( "メッセージを受信しました" + event.data ) ; doSomething (); } function doSomething ( ) { //作業を実行worker.postMessage ( "作業完了!" ); }
ワーカーを終了します();
ワーカーが終了すると、そのワーカーはスコープ外となり、それを参照する変数は未定義になります。この時点で、必要に応じて新しいワーカーを作成する必要があります。
例
Web ワーカーの最も単純な使用法は、ユーザー インターフェイスを中断せずに計算コストの高いタスクを実行することです。
この例では、メイン ドキュメントは Web ワーカーを生成して素数を計算し、最後に見つかった素数を段階的に表示します。
メインページは以下のとおりです。
<!DOCTYPE html>
< html >
< head >
< title >ワーカーの例: 1 つのコアでの計算</ title >
</ head >
< body >
< p >これまでに発見された最大の素数は次のとおりです。< output id = "result" ></ output ></ p >
< script >
var worker = new Worker ( 'worker.js' ); worker . onmessage = function ( event ) { document . getElementById ( 'result' ). textContent = event . data ; }; </ script > </ body > </ html >
コンストラクWorker()ター呼び出しは Web ワーカーを作成し、workerその Web ワーカーを表すオブジェクトを返します。このオブジェクトは Web ワーカーとの通信に使用さonmessageれます。このオブジェクトのイベント ハンドラーにより、コードは Web ワーカーからメッセージを受信できます。
Web Worker 自体は次のとおりです。
var n = 1 ; var end_value = 10 ** 7 ; search : while ( n <= end_value ) { n ++ ; for ( var i = 2 ; i <= Math.sqrt ( n ) ; i ++ ) if ( n % i == 0 ) continue search ; // 素数が見つかりました! postMessage ( n ) ; }
ページにメッセージを送り返すには、postMessage()素数が見つかったときにメッセージを投稿するメソッドを使用します。[1]
サポート
ブラウザがWebワーカーをサポートしている場合、グローバルウィンドウオブジェクトでWorkerプロパティが利用可能になります。[3]ブラウザがサポートしていない 場合、Workerプロパティは未定義になります。
次のサンプルコードは、ブラウザでのWebワーカーのサポートをチェックします。
function browserSupportsWebWorkers () { return typeof window . Worker === "function" ; }
Webワーカーは現在、Chrome、Opera、Edge、Internet Explorer（バージョン10）、Mozilla Firefox、Safariでサポートされています。[4] [5] [6] iOSのモバイルSafariは、iOS 5からWebワーカーをサポートしています。AndroidブラウザはAndroid 2.1で初めてWebワーカーをサポートしましたが、Androidバージョン2.2～4.3でサポートが削除され、Android 4.4で復元されました。[7] [8]
参考文献
- ^ abcd Web Workers、WHATWG 、2023年1月2日閲覧
- ^ 「HTML Living Standard」. Html.spec.whatwg.org . 2017年1月30日. 2017年1月31日閲覧。
- ^ 「HTML5 Up and Running」マーク・ピルグリム。O'Reilly/Google Press。2010 年 8 月
- ^ 「HTML5 の紹介」、Lawson, B. および Sharp, R.、2011 年。
- ^ 「HTML5 と CSS3」Brian P. Hogan。The Pragmatic Programmers, LLC 2010。
- ^ 「Can I Use... Web Worker」. caniuse.com . 2019年9月30日閲覧。
- ^ 「スポットライト: Web Workers を使用した Android 2.1 のベンチマーク - Isogenic Engine」。2013 年 10 月 19 日時点のオリジナルよりアーカイブ。2011 年7 月 10 日閲覧。
- ^ 「HTML5、CSS3 などのテーブルをサポートできますか...」caniuse.com 。2017 年6 月 10 日閲覧。
外部リンク
- Web ワーカー – W3C [リンク切れ]
- ウェブワーカー – WHATWG
- Web Workers の使用 – Mozilla Developer Network