srcmini上一章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发送的消息。
注意：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。
评论前必须登录！
注册