JavaScript - Worker API

上一頁
下一頁

Web Worker API

Worker API 是一個 Web API，它允許我們在後臺執行緒中執行 JavaScript 程式碼。每當網頁在瀏覽器中載入時，在瀏覽器載入每個 <script> 標籤後，它都會變得互動式。Web Workers 允許使用者在不載入整個 JavaScript 程式碼的情況下與網頁進行互動。它提高了網頁的響應時間。

建立 Web Worker 檔案

要建立 Web Worker，您需要在外部檔案中編寫一個指令碼，您需要在不同的檔案中執行該指令碼。

檔名應具有“.js”副檔名。

在下面的 JavaScript 程式碼中，我們定義了 counter() 函式。我們在函式內部使用了 setTimeout() 方法，以每 1000 毫秒呼叫一次 counter() 函式。

程式碼的重要部分是 postMessage() 方法。它用於將資料傳送到主執行緒。

function counter() {
    postMessage(data); // To send data to the main thread
    setTimeout("counter()", 1000);
}
counter();

檢查 Web Worker 支援

在建立 Web Worker 之前，您應該檢查您的瀏覽器是否支援 Web Worker。您可以使用 typeof 運算子來檢查這一點。

if (typeof(Worker) !== "undefined") {
    //"Web worker is supported by your browser!";
} else {
    //"Web worker is not supported by your browser!";
}

建立 Web Worker 物件

建立外部 JavaScript 檔案後，您需要透過將外部 JavaScript 檔案的路徑作為引數傳遞來建立一個新的 Worker 物件，如下所示。

const workerObj = new Worker("testWorker.js");

要從 worker 檔案中獲取主執行緒的訊息（我們使用 postMessage() 方法傳送），您可以在 worker 物件上使用“onmessage”事件，如下所示。

workerObj.onmessage = function(e) {
  // Use the event.data
};

終止 Web Worker 的執行

當您開始執行 Web Worker 指令碼時，它會繼續執行，直到您終止執行。

您可以使用 terminate() 方法終止 Web Worker 的執行，如下所示。

workerObj.terminate();

示例：Web Worker 的完整程式

檔名：- index.html

在下面的程式碼中，我們定義了 startWorker() 和 stopWorker() 函式來啟動和停止 worker 的執行。

在 startWorker() 函式中，首先，我們檢查瀏覽器是否支援 worker。之後，我們檢查是否正在執行 worker 的任何例項。如果不是，我們使用在外部檔案中定義的指令碼建立 Worker 物件的新例項。

之後，我們在 worker 物件上添加了“onmessage”事件。因此，每當它從外部指令碼檔案獲取資料時，它都會列印資料並執行其他操作。

在 stopWorker() 函式中，我們使用 workerObj 物件的 terminate() 方法來終止 worker 的執行。

<html>
<body>
<button onclick = "startWorker()"> Start Counter </button>
<button onclick = "stopWorker()"> Stop Counter </button>
<div id = "output"></div>
<script>
   let output = document.getElementById('output');
   let workerObj;
   function startWorker() {
      if (typeof (Worker) !== "undefined") {
         if (typeof workerObj === "undefined") {
            workerObj = new Worker("app.js");
            workerObj.onmessage = function (event) {//Getting the message from web worker
               output.innerHTML += "Event data is: " + event.data + "<br>";
            };
         }
      } else {
         output.innerHTML += "Web worker is not supported by your browser.";
      }
   }
   function stopWorker() { // To stop the web worker.
      if (typeof workerObj !== "undefined") {
         workerObj.terminate();
         workerObj = undefined;
      }
   }
</script>
</body>
</html>

檔名：- app.js

在下面的程式碼中，我們定義了 counter() 函式。在 counter() 函式中，我們使用 setTimeOut() 方法來每秒呼叫一次 counter() 函式。它還使用 postMessage() 方法將資料釋出到主執行緒。

var i = 0;
function timedCount() {
   i = i + 1;
   postMessage(i);
   setTimeout("timedCount()",500);
}
timedCount();

輸出

要執行以上程式碼，您需要確保 index.html 和 app.js 檔案位於活動 Web 伺服器上。您也可以使用 localhost。此外，請確保在 index.html 檔案中 Worker 物件內部為 app.js 檔案新增正確的路徑。

Web Worker API

您還可以使用同一檔案中的多個 worker 在後臺執行多個指令碼。

Web Worker 用例

以上示例很簡單，在這種情況下，您不需要使用 Web Worker，但這僅用於演示。

以下是 Web Worker 的即時用例。

  • 當您需要執行大型或複雜的數學指令碼時

  • 在 HTML 遊戲中，您可以使用 Web Worker

  • 如果您想提高網站效能

  • 在並行下載中，當您需要執行多個執行緒時

  • 用於後臺資料同步

  • 在機器學習中

  • 用於生成報告

  • 處理音訊和影片

Web Worker 和 DOM

由於您需要在外部檔案中定義 Web Worker 的指令碼，因此您不能在外部檔案中使用以下物件。

  • 視窗物件

  • 文件物件

  • 父物件

但是，您可以在 Web Worker 中使用以下物件。

  • 位置物件

  • 導航器物件

  • 應用程式快取

  • 使用 importScripts() 匯入外部指令碼

  • XMLHttpRequest

列印頁面

上一頁
下一頁
廣告