內聯網路工作者：何時以及如何使用它們？-js教程-PHP中文網

內聯網路工作者：何時以及如何使用它們？

Mary-Kate Olsen

發布： 2024-10-30 00:14:02

原創

373 人瀏覽過

Inline Web Workers: When and How to Use Them?

內聯Web Workers：綜合指南

雖然Web Workers 通常在單獨的JavaScript 檔案中定義，但有一種方法可以內聯建立它們在同一個HTML 檔案中。當旨在最大限度地減少要分發的單獨檔案的數量時，特別是在使用閉包編譯器等工具進行程式碼最佳化時，此方法非常有利。

建立內聯 Web Workers

內聯網路工作人員利用 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>

登入後複製

在此範例中，內聯工作代碼在<script> 中定義。 type 屬性設定為「javascript/worker」的標記。然後，主 JavaScript 程式碼從工作程式程式碼建立一個 Blob 對象，並使用 window.URL.createObjectURL() 為工作程序建立 URL 句柄。 </script>

優點和用例

內聯Web Worker 具有多種優點：