html5之web worker

Web Worker

 

在本文中

• 与 Web Worker 进行双向通信
• WindowTimers
• 在 IE10 Platform Preview 4 中对 Web Worker 的更新
• API 参考
• 示例和教程
• 有关 Internet Explorer 的 Test Drive 演示
• IEBlog 文章
• 规范
• 相关主题

Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用引入了对 Web Worker 的支持。Web Worker API 定义了一种在后台运行脚本的方法。 Web Worker 是在万维网联合会 (W3C) 的 Web Worker 规范中指定的。

从传统意义上来说，浏览器是单线程的，它们会强制应用程序中的所有脚本一起在单个 UI 线程中运行。虽然你可以通过使用文档对象模型 (DOM) 事件和setTimeout API 造成一种多个任务同时在运行的假象，但只需一个计算密集型任务就会使用户体验急转直下。

Web Worker API 为 Web 应用程序的创作人员提供了一种方法，用于生成与主页并行运行的后台脚本。你可以一次生成多个线程以用于长时间运行的任务。新的 worker 对象需要一个 .js 文件，该文件通过一个发给服务器的异步请求包含在内。

JavaScript

 

var myWorker = new Worker('worker.js');

往来于 worker 线程的所有通信都通过消息进行管理。主机 worker 和 worker 脚本可以通过 postMessage 发送消息并使用 onmessage 事件侦听响应。消息的内容作为事件的数据属性进行发送。

下面的示例创建一个 worker 线程并侦听消息。

JavaScript

 

var hello = new Worker('hello.js');
hello.onmessage = function(e) {
  alert(e.data);
};

worker 线程发送要显示的消息。

JavaScript

 

postMessage('Hello world!');

与 Web Worker 进行双向通信

要建立双向通信，主页和 worker 线程都要侦听 onmessage 事件。在以下示例中，Worker 线程在指定的延迟后返回消息。

首先，该脚本创建 worker 线程。

JavaScript

 

var echo = new Worker('echo.js'); 
echo.onmessage = function(e) {
  alert(e.data); 
}

消息文本和超时值在表单中进行指定。当用户单击提交按钮时，脚本会将两条信息以 JavaScript 对象文本的形式传递给 worker。为了防止页面在新的 HTTP 请求中提交表单值，事件处理程序还对事件对象调用 preventDefault。注：你不能将对 DOM 对象的引用发送给 worker 线程。Web Worker 并非可以访问所有数据。只允许访问 JavaScript 基元（例如 Object 或 String 值）。

HTML

 

<script>
window.onload = function() {
  var echoForm = document.getElementById('echoForm'); 
  echoForm.addEventListener('submit', function(e) {
    echo.postMessage({
      message : e.target.message.value,
      timeout : e.target.timeout.value
    }); 
    e.preventDefault();
  }, false); 
  }
</script>
<form id="echoForm">
  <p>Echo the following message after a delay.</p>
  <input type="text" name="message" value="Input message here."/><br/>
  <input type="number" name="timeout" max="10" value="2"/> seconds.<br/>
  <button type="submit">Send Message</button>
</form>

最后，worker 侦听消息，并在指定的超时间隔之后将其返回。

JavaScript

 

onmessage = function(e) 
{
  setTimeout(function() 
  {
    postMessage(e.data.message);
  }, 
  e.data.timeout * 1000);
}

在 Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用中，Web Worker API 支持以下方法。

方法	描述
void close()；	终止 worker 线程。
void importScripts(inDOMString... urls)；	导入其他 JavaScript 文件的逗号分隔列表。
void postMessage（在任何数据中）；	从 worker 线程发送消息或发送消息到 worker 线程。

Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用支持以下 Web Worker API 属性：

属性	类型	描述
location	WorkerLocation	代表绝对 URL，包括protocol、host、port、hostname、pathname、search 和 hash 组件。
navigator	WorkerNavigator	代表用户代理客户端的标识和 onLine 状态。
self	WorkerGlobalScope	Worker 范围，包括 WorkerLocation 和 WorkerNavigator 对象。

Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用支持以下 Web Worker API 事件：

事件	描述
onerror	出现运行时错误。
onmessage	接收到消息数据。

WindowTimers

Web Worker API 还支持更新的 HTML5 WindowTimers 功能。

方法	描述
void clearInterval(inlonghandle)；	取消由句柄所确定的超时。
void clearTimeout(inlonghandle)；	取消由句柄所确定的超时。
long setInterval(inanyhandler,inoptionalanytimeout, inany...args)；	计划在指定的毫秒数之后重复运行的超时。注：你现在可以将其他参数直接传递到处理程序。如果处理程序是 DOMString，它被编译成 JavaScript。将句柄返回到超时。清除 clearInterval。
long setTimeout(inanyhandler，在可选的任何超时中，在任何... 参数中）；	计划在指定的毫秒数之后运行的超时。注：你现在可以将其他参数直接传递到处理程序。如果处理程序是 DOMString，它被编译成 JavaScript。将句柄返回到超时。清除 clearTimeout。

在 IE10 Platform Preview 4 中对 Web Worker 的更新

Internet Explorer 10 Platform Preview Build 4 添加了每个进程 25 个 Web Worker 线程的限制。你可以在脚本中创建更多的 worker，但同时只有 25 个将处于活动状态。

如果达到最大线程数，创建 worker 将不会引发异常。调用总是成功，你可以添加处理程序并将消息发布给它。但是，在现有的 25 个线程之一变得可用之前，worker 可能不会启动。

JavaScript

 

// Coding pattern before IE10 Platform Preview Build 4
try {
    var worker = new Worker(url);
} catch(ex) {
    // IE might throw...?
}

// After IE10 Platform Preview Build 4
var worker = new Worker(url);
// Continue with confidence...