HTML5 Web Workers

Created: October-16, 2018

Web worker 是在網頁後臺執行的 JavaScript 程式碼。

什麼是 Web Workers

如果你嘗試使用 JavaScript 進行密集型任務非常耗時且需要大量計算，則會凍結網頁並中斷使用者，直到作業完成。這是因為 JavaScript 程式碼總是在前臺執行。

HTML5 引入了一項名為 Web worker 的新技術，該技術專門用於獨立於其他使用者介面指令碼進行後臺工作，而不會影響頁面的效能。與 JavaScript 不同，Web worker 不會中斷使用者，並且 Web 頁面保持響應，因為它們在後臺執行任務。

提示： 所有主要的現代瀏覽器（如 Firefox，Chrome，Opera，Safari 和 Internet Explorer 10+）都支援 HTML5 的 Web 工作者功能。

建立 Web Workder 檔案

Web Worker 最簡單的用途是執行耗時的任務。所以這裡我們將建立一個從 0 到 100,000 的簡單 JavaScript 任務。讓我們建立一個名為 worker.js 的外部 JavaScript 檔案，然後輸入以下程式碼。

var i = 0;
function countNumbers(){
    if(i < 100000){
        i = i + 1;
        postMessage(i);
    }
 
    // Wait for sometime before running this script again
    setTimeout("countNumbers()", 500);
}
countNumbers();

注意： postMessage() 方法用於將訊息（如上例中的數字）從 Web worker 檔案傳送回 Web 頁面。

與 Web Worker 一起在後臺工作

現在我們已經建立了我們的 Web worker 檔案。在本節中，我們將從 HTML 文件啟動 Web worker，該文件在後臺執行名為 worker.js 的檔案中的程式碼，並逐步在 Web 頁面上顯示結果。

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Web Worker</title>
<script type="text/javascript">
    if(window.Worker){
        // Set up global variable
        var worker;
      
        // Create a new web worker
        worker = new Worker("worker.js");
        
        // Fire onMessage event handler
        worker.onmessage = function(event){
            document.getElementById("result").innerHTML = event.data;
        };
    } else{
        alert("Sorry, your browser do not support web worker.");
    }
</script>
</head>
<body>
	<div id="result">
        <!--Received messages will be inserted here-->
    </div>
</body>
</html>

示例說明：

上例中的 JavaScript 程式碼具有以下含義：

var worker = new Worker（"worker.js"）; 建立一個新的 Web worker 物件，用於與 Web worker 通訊。
當工作人員釋出訊息時，它會觸發 onmessage 事件處理程式，該處理程式允許程式碼從 Web worker 接收訊息。
event.data 元素都包含了網路工作者傳送的訊息。

注意： 工作程式執行的程式碼始終儲存在單獨的 JavaScript 檔案中。這是為了防止 Web 開發人員編寫嘗試使用全域性變數或直接訪問頁面上元素的 Web worker 程式碼。

終止 Web Worker

到目前為止，你已經學會了如何建立 worker 並開始接收訊息。但是，你也可以在計算過程中終止正在執行的工作程式。

以下示例將向你展示如何通過單擊 HTML 按鈕從 Web 頁面啟動和停止 worker。它使用我們在前一個示例中使用的相同 JavaScript 檔案’worker.js’來計算從零到 100000 的數字。

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Web Worker</title>
<script type="text/javascript">
    // Set up global variable
    var worker;
    
    function startWorker(){
        // Initialize web worker
        worker = new Worker("worker.js");
        
        // Run update function, when we get a message from worker
        worker.onmessage = update;
        
        // Tell worker to get started
        worker.postMessage("start");
    }
    
    function update(event){
        // Update the page with current message from worker
        document.getElementById("result").innerHTML = event.data;
    }
    
    function stopWorker(){
        // Stop the worker
        worker.terminate();
    }
</script>
</head>
<body>
    <h1>Web Worker Demo</h1>
    <button onclick="startWorker();" type="button">Start web worker</button>
    <button type="button" onclick="stopWorker();">Stop web worker</button>
    <div id="result">
        <!--Received messages will be inserted here-->
    </div>
</body>
</html>

提示： 使用 Web worker 僅執行不會中斷使用者介面指令碼的重量級 JavaScript 任務（即響應點選或其他使用者互動的指令碼）。不建議將 Web worker 用於簡短任務。