ブラウザーが単一のスレッドで js コードを実行することは誰もが知っていますが、ページ ステップが実行されると、そのステップが終了するまでページは他のものに応答できなくなります。
WebWorkers は、他のスクリプトから独立してバックグラウンドで実行される JS コードであり、ページのパフォーマンスには影響しません。 WebWorkers がバックグラウンドで実行されている間、クリックやコンテンツの選択など、必要な操作を続行できます。
Web ワーカーは、Internet Explorer を除くすべての主要なブラウザでサポートされています。
最初のステップ: ワーカーを生成します。Worker() コンストラクターを呼び出し、ワーカー スレッドで実行されるスクリプトの URI を指定します。たとえば、現在のページでは、ワーカー スレッドによって実行されるスクリプトが script-worker.js であると指定されます。
var myWorker = 新しいワーカー(script-worker.js);
script-worker.js では追加のコードを実行できます。このコードの実行は、ページが他の目的の処理に影響を与えることはありません。これは素晴らしいことだと思います。
ステップ 2: データを渡します。ページはワーカーと対話してデータを転送できるため、ワーカーはページの有意義な処理に影響を与えることなく、サイレントに計算できます。その後、ページにデータを使用するよう指示します。
//[メイン ページ コード]myWorker.postMessage(data-from-mainpage);//[ワーカー コード]onmessage = function (oEvent) { console.log(メイン ページから送信されたデータは: +oEvent.data)) ; };上記は [メイン ページがワーカー スクリプトにデータを送信する] 状況です。はい、とてもフレンドリーな postMessage を見ましたね。わかりました。これは気に入っています。
//[メイン ページ コード] myWorker.onmessage = function (oEvent) { console.log(ワーカー スクリプトによって送信されるデータは次のとおりです: +oEvent.data) }; //[ワーカー コード]postMessage(data-from-);メインページ );上記は [ワーカー スクリプトがメイン ページにデータを送信する] 状況です。これはまだ非常に単純ですが、重要なのは、賢く使用することが有益であるということです。
さらに、ワーカーの実行でエラーが発生する可能性があり、メイン ページは成功します。
myWorker.onerror=function(oEvent){};ワーカーのエラーを監視できます。
ステップ 3: 重要なポイント。ワーカー スレッドは、UI に干渉することなくタスクを実行できます。実行された JavaScript コードは完全に別のスコープ内にあり、現在の Web ページのコードとスコープを共有しません。
importScripts() メソッドは Worker のグローバル スコープで提供され、JavaScript ファイルを指す 1 つ以上の URL を受け取ります。読み込みプロセスは非同期で実行されます。
importScripts() は絶対 URI を指定した場合にのみ有効になり、実行プロセスも非同期です。
WebWorkers オブジェクトを作成すると、myWorker.terminate() メソッドを使用して WebWorkers を終了し、ブラウザ/コンピュータのリソースを解放するまで、(外部スクリプトが完了した後でも) メッセージをリッスンし続けます。
ステップ 4: 重要な制限事項。1. DOM ノード、グローバル変数、またはグローバル関数にアクセスできず、alert() やconfirm などの関数を呼び出すことができず、ウィンドウやドキュメントなどのブラウザーのグローバル変数にアクセスできません。
2. ただし、Web Worker の Javascript では引き続き setTimeout() や setInterval() などの関数を使用でき、Ajax 通信に XMLHttpRequest オブジェクトを使用することもできます。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。