html5 Web worker用法 – HTML5教程 html5webworker|HTML

上一章HTML5教程请查看：html5应用程序缓存
在本教程中，你将学习如何使用HTML5 web worker在后台运行JavaScript代码。
什么是Web worker？如果你试图使用JavaScript执行耗时且需要大量计算的密集任务，浏览器将冻结web页面并阻止用户执行任何操作，直到任务完成，这是因为JavaScript代码总是在前台运行。
HTML5引入了一项名为web worker的新技术，该技术专门设计用于独立于其他用户界面脚本进行后台工作，而不会影响页面的性能。与普通的JavaScript操作不同，web worker不会中断用户，而且web页面保持响应性，因为它们在后台运行任务。
提示：HTML5的web worker特性在所有主要的现代web浏览器中都得到了支持，比如Firefox、Chrome、Opera、Safari和Internet Explorer 10及以上。
创建一个Web worker文件web workers最简单的用途是执行耗时的任务。这里我们将创建一个简单的JavaScript任务，其数量从0到100,000。
让我们创建一个名为“worker”的外部JavaScript文件，并键入以下代码。

var i = 0; function countNumbers() { if(i < 100000) { i = i + 1; postMessage(i); } // 请等待一段时间再运行此脚本 setTimeout("countNumbers()", 500); } countNumbers();

注意：Web worker不能访问DOM，这意味着你不能访问你打算使用web workers运行的JavaScript代码中的任何DOM元素。
提示：worker对象的postMessage()方法用于从web worker文件向web页面发送一条消息(如上面示例中的数字)。
使用Web Worker在后台工作现在我们已经创建了web worker文件。在本节中，我们将从一个HTML文档启动web worker，该文档运行名为“worker”文件中的代码。并在网页上逐步显示结果。让我们看看它是如何工作的：

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title>使用Web Worker< /title> < script> if(window.Worker) { // 创建web worker var worker = new Worker("worker.js"); // Fire onMessage事件处理程序 worker.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; } else { alert("对不起，你的浏览器不支持web worker!"); } < /script> < /head> < body> < div id="result"> < !--接收到的消息将插入这里--> < /div> < /body> < /html>

例子解释：
以上例子中的JavaScript代码有如下含义：

语句var worker = new worker (“ worker.js” ); 创建一个新的web worker对象，该对象用于与web worker通信。
当worker发布消息时，它触发onmessage事件处理程序(第14行)，允许代码从web worker接收消息。
event.data数据元素包含从web worker发送的消息。

【html5 Web worker用法 – HTML5教程】注意：worker运行的代码总是存储在一个单独的JavaScript文件中，这是为了防止web开发人员编写试图使用全局变量或直接访问web页面上的元素的web worker代码。
终止Web worker到目前为止，你已经学习了如何创建worker并开始接收消息。但是，你也可以在执行过程中终止正在运行的worker。
下面的示例将向你展示如何通过单击HTML按钮来启动和停止web页面中的worker。它使用相同的JavaScript文件“worker”。我们在前面的例子中使用的从0到100000的数字。让我们来试试：

< !DOCTYPE html> < html lang="zh_CN"> < head> < meta charset="utf-8"> < title>开始/停止Web Worker< /title> < script> // 设置全局变量 var worker; function startWorker() { // 初始化web worker worker = new Worker("worker.js"); // 当我们从worker获取消息，运行更新功能 worker.onmessage = update; // 告诉worker启动 worker.postMessage("start"); }function update(event) { // 用来自worker的当前消息更新页面 document.getElementById("result").innerHTML = event.data; }function stopWorker() { // 停止worker worker.terminate(); } < /script> < /head> < body> < h1>Web Worker例子< /h1> < button onclick="startWorker(); " type="button">开始web worker< /button> < button type="button" onclick="stopWorker(); ">停止web worker< /button> < div id="result"> < !--接收到的消息将插入这里--> < /div> < /body> < /html>

提示：使用web workers只执行不会中断用户界面脚本(即响应单击或其他用户交互的脚本)的重量级JavaScript任务，不建议在短时间内使用web worker。