ホームページ > 記事 > ウェブフロントエンド > インライン Web ワーカー: いつ、どのように使用するか?

インライン Web ワーカー: いつ、どのように使用するか?

Mary-Kate Olsenオリジナル: 2024-10-30 00:14:02374ブラウズ

Inline Web Workers: When and How to Use Them?

インライン Web ワーカー: 総合ガイド

Web ワーカーは通常、別個の JavaScript ファイルで定義されますが、インラインで作成する方法もあります。同じ HTML ファイル内で。このアプローチは、配布用の個別ファイルの数を最小限に抑えることを目指す場合、特にコード最適化にクロージャコンパイラなどのツールを使用する場合に有利です。

インライン Web ワーカーの作成

インライン Web ワーカーは、Blob() を利用してワーカーコードへの URL ハンドルを文字列として作成します。これにより、ワーカーを HTML ファイルに直接含めることができます。完全な例を次に示します。

インラインワーカーコードを含む HTML:

<code class="html"><!DOCTYPE html>
<script id="worker1" type="javascript/worker">
  // This script won't be parsed by JS engines due to its type.
  self.onmessage = function(e) {
    self.postMessage('msg from worker');
  };
</script></code>

メイン JavaScript コード:

<code class="javascript">var blob = new Blob([
  document.querySelector('#worker1').textContent
], { type: "text/javascript" });

// Use window.webkitURL.createObjectURL() for Chrome versions below 11.
var worker = new Worker(window.URL.createObjectURL(blob));
worker.onmessage = function(e) {
  console.log("Received: " + e.data);
};
worker.postMessage("hello"); // Start the worker.</code>

この例では、インラインワーカーコードは