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

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

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

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

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

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

<code class="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>

この例では、インライン ワーカー コードは <script> 内で定義されています。 type 属性が「javascript/worker」に設定されたタグ。次に、メインの JavaScript コードはワーカー コードから Blob オブジェクトを作成し、window.URL.createObjectURL() を使用してワーカーの URL ハンドルを作成します。</script>

利点と使用例

インライン Web ワーカーには、いくつかの利点があります。

• ワーカーとメイン コードを 1 つのファイルに結合して、分散を最適化し、HTTP リクエストを削減します。
• インライン ワーカー コードでは実現できないため、セキュリティが強化されます。外部サイトからアクセスされます。

インライン Web ワーカーの考えられる使用例には次のようなものがあります。

• メイン スレッドからのオフロードが必要な長時間実行の計算。
• メインスレッドを中断することなく、時間に敏感なタスクを処理します。
• セキュリティまたは保守性の目的で特定のコードを分離します。

以上がインライン Web ワーカー: いつ、どのように使用するか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。