HTML5 使用Web Worker处理线程
基础知识
Web Worker是在HTML5中新增的,用来在Web应用程序中实现后台处理的一项技术。使用这个API,用户可以很容易地创建在后台运行的线程(在HTML5中称为worker),如果将可能耗费较长时间的处理交给后台去执行,对用户在前台页面中执行的操作就完全没有影响了。
创建后台线程的步骤很简单。只要在Worker类的构造器中将需要在后台线程中执行的脚本文件的URL作为参数,然后创建Worker对象就可以了,例如:
示例中使用的线程脚本代码如下:
self.addEventListener("message", function(event) {var data = JSON.parse(event.data);var returnArray = new Array();var temp;for(var index = 0; index < data.length; index++) {if((temp = data[index]) % 3 == 0) {returnArray.push(temp);}}self.postMessage(JSON.stringify(returnArray)); self.close(); // 关闭子线程。}, false);注意:在子线程中向发送源发送回消息后,如果该子线程不再使用,则可以使用self.close()方法关闭该子线程。
多层嵌套要实现子线程与子线程之间的数据交互,其基本步骤如下:
先创建发送数据的子线程。执行子线程中的任务,然后把要传递的数据发送给主线程。在主线程接收到子线程传回来的消息时,创建接收数据的子线程,然后再把发送数据的子线程中返回的消息传递给接收数据的子线程。执行接收数据子线程中的代码。
线程中可用的变量、函数与类self:用来表示本线程范围内的作用域。postMessage(msg):向创建线程的源窗口发送消息。onmessage:获取接收消息的事件句柄。importScripts(urls):导入其它JavaScript脚本文件。参数为该脚本文件的URL地址,可以导入多个脚本文件,导入的脚本文件必须与使用该线程文件的页面在同一个域中,并在同一个端口中。navigator对象:与window.navigator对象类似,具有appName、platform、userAgent、appVersion等属性。sessionStorage、localStorage:可以在线程中使用Web Storage。XMLHttpRequest:可以在线程中处理Ajax请求。Web Workers:可以在线程中嵌套线程。setTimeout()、setInterval():可以在线程中实现定时处理。close():结束本线程。eval()、isNaN()、escape()等:可以使用所有JavaScript核心函数。object:可以创建和使用本地对象。WebSockets:可以使用WebSockets API来向服务器发送和接收信息。