上一章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发送的消息。
终止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。
推荐阅读
- html5服务器发送的事件server-sent event – HTML5教程
- html5应用程序缓存 – HTML5教程
- html5 Web存储 – HTML5教程
- html5视频video元素 – HTML5教程
- html5音频audio元素 – HTML5教程
- html5 SVG绘制以及和canvas的区别 – HTML5教程
- html5 canvas绘图 – HTML5教程
- html5 input新输入类型 – HTML5教程
- html ISO语言代码 – HTML教程