第八章 Web Workers API

 

HTML5 Web Worker可以让Web应用程序具备后台处理能力。它对多线程的支持性非常好，因此，使用了HTML5的JavaScript应用程序可以充分利用多核CPU带来的优势。将耗时长的任务分配给HTML5 Web Workers执行，可以避免弹出脚本运行缓慢的警告。

       在Web Workers中执行的脚本不能访问该页面的window对象（window.document），换句话说，Web Workers不能直接访问Web页面和DOM API。虽然Web Workers不会导致浏览器UI停止响应，但是仍然会消耗CPU周期，导致系统反应速度变慢。

8.1 HTML5 Web Workers的浏览器支持情况

8.2 使用HTML5 Web Workers API

       Web Workers的使用方法非常简单，只需创建一个Web Workers对象，并传入希望执行的JavaScript文件即可。另外，在页面中再设置一个事件监听器，用来监听由Web Worker发来的消息和错误信息。如果想要在页面与Web Workers之间建立通信，数据需通过postMessage函数传递。对于Web Worker Javascript中的代码也是如此：必须通过设置事件处理程序来处理发来的消息和错我信息，通过postMessage函数实现与页面的数据交互。

8.2.1 浏览器支持性检查

8.2.2 创建HTML5Web Workers

       Web Workers初始化时会接受一个Javascript文件的URL地址，其中包含了供Worker执行的代码。这段代码会设置事件监听器，并与生成Worker的容器进行通信。Javascript文件的URL可以是相对或者绝对路径，只要是同源（相同协议、主机和端口）即可：

       worker=new Worker(“echoWorker.js”)；

8.2.3 多个Javascript文件的加载与执行

       对于由多个Javascript文件组成的应用程序来说，可以通过包含<script>元素的方式，在页面加载的时候同步加载Javascript文件。然而，由于Web Workers没有访问document对象的权限，所以在Worker中必须使用另外一种方法导入其他的Javascript文件——importScripts:

       importScripts(“helper.js”);

       导入的Javascript文件只会在某一个已有的Worker中加载和执行。多个脚本的导入同样也可以使用importScript函数，它们会按顺序执行：

       importScripts(“helper.js”,”anotherHelper.js”);

8.2.4 与HTML5 Web Workers通信

       Web Work而一旦生成，就可以使用postMessage API传送和接收数据。postMessage API还支持跨框架和跨窗口通信。大多数Javascript对象都可以通过postMessage发送，但含有循环引用的除外。

8.3 编写主页

8.3.1 处理错误

       HTML5 Web Workers脚本中未处理的错误会引发Web Workers对象的错误事件。特别是在调试用到了Web Workers 的脚本时，对错误事件的监听就显得尤为重要。

8.3.2 HTML5 Web Works

       Web Workers不能自行终止，但能够被启用它们的页面所终止。开发人员都希望在不再需要Web Workers时回收其所占资源，比如当Web Workers通知主页它已执行完成的时候。

       终止Web Workers可以调用terminate函数来实现。被终止的Web Workers将不再能响应任何消息或者执行任何其他的计算。终止之后，Worker不能被重新启动，但可以使用同样的URL创建一个新的Worker。

8.3.3 HTML5 Web Workers的嵌套使用

       Worker的API能够在Web Workers脚本中嵌套使用，以创建子Worker:

       var subWorker=new Worker(“subWorker.js”);

8.3.4 使用定时器

       虽然HTML5 Web Workers不能访问window对象，但是它可以与属于window对象的JavaScript定时器API协作：

       var t=setTimeout(postMessage,2000,”delayed message”);

8.3.5 示例代码