Web Worker API

Web Worker 是在后臺運行的 JavaScript，不會影響頁面的性能。

什么是 Web Worker？

在 HTML 頁面中執行腳本時，頁面在腳本完成之前是無響應的。

Web Worker 是在后臺運行的 JavaScript，獨立于其他腳本，不會影響頁面的性能。你可以繼續做任何你想做的事情：點擊、選取內容等，同時 web worker 在后臺運行。

瀏覽器支持

表中的數字注明了完全支持 Web Workers 的首個瀏覽器版本：

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
2010 年 1 月 2012 年 9 月 2009 年 6 月 2009 年 6 月 2011 年 6 月

Web Worker 實例

下面的例子創建了一個簡單的 Web Worker，它在后臺計算數字：

實例

計數：

親自試一試

檢查 Web Worker 瀏覽器

在創建 web worker 之前，請檢查用戶的瀏覽器是否支持它：

if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
  // Some code.....
} else {
  // Sorry! No Web Worker support..
}

創建 Web Worker 文件

現在，讓我們在外部 JavaScript 中創建我們的 Web Worker。

在這里，我們創建了一個重要的腳本。該腳本存儲在 "demo_workers.js" 文件中：

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

上面代碼的重要部分是 postMessage() 方法 - 用于將消息發送回 HTML 頁面。

注釋：通常 web worker 不用于這種簡單的腳本，而是用于 CPU 密集型任務。

創建 Web Worker 對象

現在我們有了 web worker 文件，我們需要從 HTML 頁面調用它。

以下代碼行檢查 worker 是否已存在，如果不存在，它會創建一個新的 web worker 對象并運行 "demo_workers.js" 中的代碼：

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

然后我們可以發送和接收來自 web worker 的消息。

向 web worker 添加一個 "onmessage" 事件偵聽器。

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

當 Web Worker 發布消息時，將執行事件偵聽器中的代碼。來自 Web Worker 的數據存儲在 event.data 中。

終止 Web Worker

當 web worker 對象被創建時，它會繼續監聽消息（即使在外部腳本完成之后）直到它被終止。

如需終止 web worker，并釋放瀏覽器/計算機資源，請使用 terminate() 方法：

w.terminate();

重用 Web Worker

如果將 worker 變量設置為 undefined，則在它終止后，您可以重用以下代碼：

w = undefined;

完整的 Web Worker 實例代碼

我們已經在 .js 文件中看到了 Worker 代碼。下面是 HTML 頁面的代碼：

實例

<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
let w;
function startWorker() {
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}
function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>
</body>
</html>

親自試一試

Web Worker 和 DOM

由于 Web Worker 位于外部文件中，因此他們無法訪問以下 JavaScript 對象：

  • window 對象
  • document 對象
  • parent 對象