开始使用Web Workers.docVIP

单线程（Single-threaded）运行是JavaScript语言的设计目标之一，进而言之是保持JavaScript的简单。但是我必须要说，尽管JavaScript具有如此语言特质，但它绝不简单！我们所说的“单线程”是指JavaScript只有一个线程控制。是的，这点令人沮丧，JavaScript引擎一次只能做一件事。 “web workers处在一个严格的无DOM访问的环境里，因为DOM是非线程安全的。” 　　现在，你是不是觉得要想利用下你机器闲置的多核处理器太受限制？不用担心，HTML5将改变这一切。 　　JavaScript的单线程模式 　　有学派认为JavaScript的单线程特质是一种简化，然而也有人认为这是一种限制。后者提出的是一个很好的观点，尤其是现在web应用程序大量的使用JavaScript来处理界面事件、轮询服务端接口、处理大量的数据以及基于服务端的响应操作DOM。 　　在维护响应式界面的同时，通过单线程控制处理如此多事件是项艰巨的任务。它迫使开发人员不得不依靠一些技巧或采用变通的方法（如使用setTimeout()，setInterval()，或调用XMLHttpRequest和DOM事件）来实现并发。然而，尽管这些技巧毫无疑问地提供了解决异步调用的方法，但非阻塞的并不意味着是并发的。John Resig在他的博客中解释了为什么不能并行运行。 　　限制 　　如果你已经和JavaScript打过一段时间的交道，那么你一定也遭遇过如下令人讨厌的对话框，提示你有脚本无响应。没错，几乎大多数的页面无响应都是由JavaScript代码引起的。 　　以下是一些运行脚本时造成浏览器无响应的原因： 过多的DOM操作：DOM操作也许是在JavaScript运行中代价最高的。所以，大批量的DOM操作无疑是你代码重构的最佳方向之一。 无终止循环：审视你代码中复杂的嵌套循环永远不是坏事。复杂的嵌套循环所做的工作常常比实际需要做的多很多，也许你可以找到其他方法来实现同样的功能。 同时包含以上两种：最坏的情况就是明明有更优雅的办法，却还是在循环中不断更新DOM元素，比如可以采用DocumentFragment。 　　好帮手Web Workers 　　幸好有了HTML5和Web Workers，你可以真正生成一条异步的线程。当主线程处理界面事件时，新的worker可以在后台运行，它甚至可以有力的处理大量的数据。例如，一个worker可以处理大型的数据结构（如JSON），从中提取变量信息然后在界面中显示。好了，废话不多说，让我们看一些实际的代码吧。 　　创建一个Worker 　　通常，与web worker相关的代码都放在一个独立的JavaScript文件中。父线程通过在Worker构造函数中指定一个JavaScript文件的链接来创建一个新的worker，它会异步加载并执行这个JavaScript文件。 ? 1 var primeWorker = new Worker(prime.js); 　　启动Worker 　　要启动一个Worker，则父线程向worker传递一个信息，如下所示： ? 1 2 var current = $(#prime).attr(value); primeWorker.postMessage(current); 　　父页面可以通过postMessage接口与worker进行通信，这也是跨源通信（cross-origin messaging）的一种方式。通过postMessage接口除了可以向worker传递私有数据类型，它还支持JSON数据结构。但是，你不能传递函数，因为函数也许会包含对潜在DOM的引用。 “父线程和worker线程有它们各自的独立空间，信息主要是来回交换而不是共享。” 　　信息在后台运行时，先在worker端序列化，然后在接收端反序列化。鉴于此，不推荐向worker发送大量的数据。 　　父线程同样可以声明一个回调函数，来侦听worker完成任务后发回的消息。这样，父线程就可以在worker完成任务后采取些必要的行动，比如更新DOM元素。如下代码所示： ? 1 2 3 4 primeWorker.addEventListener(message, function(event){ ????console.log(Receiving from Worker: +event.data); ????$(#prime).html( event.data ); }); 　　event对象包含两个重要属性： target：用来指向发送信息的worker，在多元worker环境下比较有用。 data：由worker发回给父线程的数据。 　　worker本身是包含在prime.js文件