内联 Web Worker 能否简化部署和缩小？

Web Workers 内联：绕过单独的 JavaScript 文件

传统上，Web Workers 是通过加载单独的 JavaScript 文件来实例化的，如您所提到的：

<code class="html">new Worker('longrunning.js')</code>

虽然方便，但在使用 Closure Compiler 等工具时，这种方法可能会使部署和缩小变得复杂。为了解决这个问题，您可以利用 Blob() 在与主逻辑相同的 HTML 文件中创建内联工作器。

使用 Blob() 的内联工作器

以下是创建内联工作器的方法使用 Blob():

1. 在 <script> 中定义您的工作脚本类型为“javascript/worker”的元素：</script>

<code class="html"><script id="worker1" type="javascript/worker">
  // Worker code goes here
</script></code>

2. 创建一个以工作脚本为内容的 Blob 对象：

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

3. 使用 window.URL.createObjectURL(blob) 创建一个 Worker 对象：

<code class="html">var worker = new Worker(window.URL.createObjectURL(blob));</code>

4. 在主线程中处理来自 Worker 的消息：

<code class="html">worker.onmessage = function(e) {
  console.log("Received: " + e.data);
}</code>

5. 通过发送消息来启动工作程序：

<code class="html">worker.postMessage("hello");</code>

这种方法允许您使工作程序代码与主逻辑保持一致，从而实现独立且易于部署包裹。

以上是内联 Web Worker 能否简化部署和缩小？的详细内容。更多信息请关注PHP中文网其他相关文章！