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 用于简短任务。