ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript での Web Workers の詳細な紹介

JavaScript での Web Workers の詳細な紹介

不言
リリース: 2018-09-12 17:30:22
オリジナル
2319 人が閲覧しました

この記事では、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート