JavaScript での Web Workers の詳細な紹介

この記事では、JavaScript の Web Worker について詳しく説明します。必要な方は参考にしてください。

はじめに

Web ワーカーは、Web コンテンツのバックグラウンド スレッドでスクリプトを実行する簡単な方法を提供します。スレッドは、ユーザー インターフェイスを妨げることなくタスクを実行できます。さらに、XMLHttpRequest を使用して I/O を実行できます (ただし、responseXML 属性とチャネル属性は常に空です)。ワーカーを作成すると、そのコードで指定されたイベント ハンドラーにメッセージをパブリッシュすることで、ワーカーを作成した JavaScript コードにメッセージを送信できます (逆も同様)。

Web Worker を使用するための重要なポイント

• 同一生成元の制限: Worker スレッドに割り当てられるスクリプト ファイルは、メイン スレッドのスクリプト ファイルと同じ生成元を持つ必要があります。

• DOM の制限: ワーカー スレッドが配置されているグローバル オブジェクトは、メイン スレッドと異なるため、メイン スレッドが配置されている Web ページの DOM オブジェクトを読み取ることはできず、ドキュメント、ウィンドウ、および親オブジェクトを使用することはできません。 。ただし、ワーカー スレッドはナビゲーター オブジェクトとロケーション オブジェクトをナビゲートできます。

• 通信: ワーカー スレッドとメイン スレッドは同じコンテキスト内にないため、メッセージを通じて通信を完了する必要があります。

• スクリプトの制限: ワーカー スレッドは、alert() メソッドとconfirm() メソッドを実行できませんが、XMLHttpRequest オブジェクトを使用して AJAX リクエストを行うことができます。

• ファイル制限: ワーカー スレッドはローカル ファイルを読み取ることができません。つまり、ローカル ファイル システム (file://) を開くことができません。ロードするスクリプトはネットワークから取得する必要があります。後ほど対応させていただきます。

http-server をインストールします

ワーカー スレッドはローカル ファイルを読み取ることができません。つまり、ロードするスクリプトはネットワークから取得する必要があります。したがって、プロジェクトを実行する余裕があります。 http-server を使用するのが最も簡単ですhttp-server最简单
安装：

> cnpm i -g http-server

使用：

> http-server

基本使用

我们新建一个文件夹名叫worker，里面新建三个文件分别是

index.html
main.js
worker.js

新建一个worker线程很简单，只需：

var worker = new Worker('worker.js')

main.js:

var worker = new Worker('./worker.js')
console.log('worker running')
worker.addEventListener('message',e => {
    console.log('main: ', e.data);
})
// 也可使用：
// worker.onmessage = (e)=>{
//     console.log('main: ', e.data);
// }
worker.postMessage('hello worker,I am from main.js')

worker.js:

console.log('worker task running')
onmessage = (e)=>{
    console.log('worker task receive', e.data);
    // 发送数据事件
    postMessage('Hello, I am from Worker.js');
}

在worker文件夹下，命令行输入http-server,启动项目，用浏览器打开，看控制台：

worker running
worker task running
worker task receive hello worker,I am from main.js
main:  Hello, I am from Worker.js

从上面可以看到，worker通过onmessage来监听数据，通过postMessgaeインストール:

worker.terminate();

使用方法:

worker.addEventListener('error',  (e) => {
  console.log('main error', 'filename:' + e.filename + 'message:' + e.message + 'lineno:' + e.lineno;
});

基本的な使用方法

worker という名前の新しいフォルダーを作成し、その中に 3 つのファイルを作成しますはい

• var worker = new Worker('./worker1.js');

  新しい worker スレッドの作成は非常に簡単で、次のようにするだけです。

  console.log("I'm worker1")
  importScripts('worker2.js', 'worker3.js');
  // 或者
  // importScripts('worker2.js');
  // importScripts('worker3.js');

main.js:

• console.log("I'm worker2")

  worker.js:

  console.log("I'm worker3")

worker フォルダーで、コマンド ラインに http-server と入力し、プロジェクトを開始し、ブラウザで開き、コンソールを確認します:
• rrreee

  上記からわかるように、worker は onmessage を渡してデータをリッスンし、postMessgae 経由でデータを送信します

終了ワーカー

rrreee

エラー処理

rrreee

event.filename: の名前エラーの原因となったワーカー スクリプト;

event .message: 間違ったメッセージ;

外部スクリプトの読み込み中

main.js

rrreee

worker1.js

rrreeeworker2.jsrrreee
worker3.js

rrreee

互換性https://caniuse.com/#feat=webworkers

互換性はあまり楽観的ではありませんが、モバイル側の互換性はかなり良好です

関連推奨事項:

🎜🎜 JavaScript スレッド API には多くの Web ワーカーがいます。

以上がJavaScript での Web Workers の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。