html5 Web worker用法 – HTML5教程

上一章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。

    推荐阅读