Web ワーカーについて知っておくべきことはすべて、使い始めるために必要な情報です。

最近、私は Web ワーカーをいじっています。これは、Web ワーカーの使用を開始するために知っておく必要のあるすべてのことについての包括的なガイドです。

ブログを読むのをスキップして、代わりにコードをチェックアウトしたい場合は、すべてのスニペットが含まれている Github リポジトリを参照してください。

Github Web ワーカー リポジトリ

目次

• よくある誤解
• Web ワーカーの基本セットアップ
  • ネイティブ JavaScript を使用した Web ワーカーのセットアップ
  • Comlink を使用した Web ワーカーのセットアップ
• 従業員が正しく登録されているかどうかを確認するにはどうすればよいですか?
• 続きを読む

 

よくある誤解

それで、私が Web ワーカーについて調べるきっかけとなったのは、構築しているプラ​​ットフォームで計算量の多いタスクが UI をブロックしていたからでした。
そこで私は、「そうですね、これを UI をブロックしないようにするにはどうすればよいでしょうか?」と考えました。 setTimeout を使用して、メイン スレッド内のすべてのコードの実行が完了したことを確認し、その後、計算量の多いタスクを実行できますか?

ここに誤解があります。setTimeout を使用しても UI がブロックされないという意味ではありません。はい、setTimeout コールバックが実行される前にメイン スレッド上のすべてが実行されますが、このコールバックはマクロ タスク キューからポップアウトされるときにメイン スレッド自体で実行されるため、UI が応答しなくなります。

setTimeout の仕組みについて詳しく知りたい場合は、いくつかの参考資料を参照してください —

• ゼロからの非同期 JavaScript とイベント ループ - Akshay Saini
• イベント ループ、Web API、タスク キュー - Lydia Hallie

 

Web ワーカーの基本セットアップ

JavaScript は本質的に「シングルスレッド言語」ですが、Web ワーカーを使用すると、計算量の多いコードを別のスレッドで実行できます。

始める前に、いくつか注意すべき点があります -

• Web ワーカーは DOM と対話できません
• Web ワーカーのスコープは window ではなく self です。
• ワーカーは比較的重量があり、大量に使用することを目的としていません。たとえば、4 メガピクセルの画像のピクセルごとに 1 つのワーカーを起動するのは不適切です。 [参照 - HTML 仕様]
• また、Web ワーカーは何かを 4 秒ではなく 2 秒で実行することではなく、DOM を 0 秒間フリーズさせてその処理を実行することです。 [参考 - Web ワーカーは遅いけど大丈夫 - Calvin Metcalf]
• ワーカーは、親ページと同じオリジン内でホストされている限り、新しいワーカーを生成する可能性があります。 [参照 - MDN]

ネイティブ JavaScript を使用する Web ワーカー

1. ワーカー スレッドで実行するコードを含む新しい JavaScript ファイルを作成します。 (worker.js と言います)
2. メインスクリプトでワーカーをインスタンス化します -

const worker = new Worker("./worker.js")

注: worker.js はモジュールではないため、import ステートメントを使用できません。まだ。 :')

worker.jsをモジュールとして使用するには、コンストラクターのオプションにtype: moduleを指定します。

const worker = new Worker("./worker.js")

1. データはメッセージ システムを介してワーカーとの間で送受信されます。双方とも postMessage() メソッドを使用してメッセージを送信し、onmessage イベント ハンドラーを介してメッセージに応答します
2. postMessage() で循環参照を持つ複雑なオブジェクトを渡すには、structuraldClone メソッドを使用します。
3. Web ワーカーを終了するには、Worker API の terminate メソッドを使用します。これは、作業者に進行中の作業を終了する機会を提供するものではありません。すぐに止められます。

const worker = new Worker('./worker.js', { type: 'module' })

すべてをまとめる

ここで、Web ワーカーを統合した後にコードがどのように見えるかを見てみましょう。

メインスレッドコード:

worker.terminate() 

ワーカー スレッド コード:

// ...
function workerFunction() {
  // Don't spin up a new worker instance if the process has already been started.
  if (statusElement.textContent !== PROCESS_STATUS.PROCESSING && window.Worker) {
    const worker = new Worker('./worker.js', {
      type: 'module'
    })

    // Sending 10000000000000 to the web worker
    worker.postMessage(10000000000000)

    statusElement.textContent = PROCESS_STATUS.PROCESSING

    // This piece of code is executed after worker finishes its task and returns data. 
    worker.onmessage = function (event) {
      statusElement.textContent = event.data
    }
  }
}
// ...

そして結果:

アプリケーションを実行すると、計算量の多いタスクが UI をブロックすることなく実行されていることがわかります。

Comlink を使用した Web ワーカーのセットアップ

Comlink は 小さなライブラリ (1.1kB) で、postMessage ロジックについて考える際の精神的な障壁を取り除きます。

より抽象的なレベルでは、postMessage と ES6 プロキシの RPC 実装です。

私が Comlink を使用した具体的な理由は、プレーンな JavaScript を使用してメインスレッドからワーカーに関数を渡すことができなかったからです。 Comlink のプロキシを使用すると、メインスレッドからワーカーにコールバック関数を簡単に渡すことができました。 [このセクションを参照]

プロジェクトで comlink の使用を開始するには、ライブラリをインストールします

const worker = new Worker("./worker.js")

このライブラリを使い始めるには、次のメソッドについて知っておく必要があります -

Comlink.wrap(エンドポイント)

• ワーカーの公開オブジェクトをラップし、ローカル オブジェクトであるかのように対話できるプロキシを返します。
• プロキシは公開された値のすべてのプロパティと関数を持ちますが、アクセスと呼び出しは本質的に非同期です。つまり、関数が数値を返す場合、その数値の Promise を返すようになります。

const worker = new Worker('./worker.js', { type: 'module' })

Comlink.expose(value, endpoint?, allowedOrigins?)

• エクスポーズ関数は、あるスレッドから別のスレッドに値を公開します (つまり、ワーカーからメインスレッドにオブジェクトを公開します)。

worker.terminate() 

自分の従業員が正しく登録されているかどうかを確認するにはどうすればよいですか?

• ワーカー ファイルが Web ブラウザに登録されているかどうかを確認するには (Chrome を使用しています)
• 右クリック→「検査」を選択し、「ソース」パネルに移動すると、ワーカーファイルが見つかります。
• 終了すると、ワーカー ファイルは [ソース] パネルに表示されなくなります
• ワーカーを終了した後もワーカー ファイルが表示される場合は、複数のワーカーを登録していて、それらのすべてが終了されていない可能性があります。

さらに読む

• 転送ハンドラーとイベント リスナー
• シェアードワーカー
• 転送可能なオブジェクト

以上がWeb ワーカーについて知っておくべきことはすべて、使い始めるために必要な情報です。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。