HTML5 Web Worker API

众所周知，类似很多UI框架，浏览器中JavaScript在单线程中执行。如果UI线程的JS阻塞会造成界面无响应。Web Worker可以在单独的线程中JS代码，但由于浏览器的特性，WebWorker无法访问dom，只能通过特定的事件和postMessage API和主线程通信。Web Worker可以使用timer API，在一个Worker中也可以启动子Worker。 WebWorder非常适合运算密集型的操作。

检测浏览器支持：
function loadDemo() {
if (typeof(Worker) !== “undefined”) {
document.getElementById(“support”).innerHTML =
“Excellent! Your browser supports HTML5 Web Workers”;
}
}

创建WebWorker
worker = new Worker(“echoWorker.js”);
主页面可以使用script标签异步加载javascript文件，但由于Web Worker无法访问dom，所以其内部可以使用如下方式异步加载js文件：
importScripts(“helper.js”, “anotherHelper.js”);
文件的加载按照参数指定的顺序进行。

和webWorker通信：
主程序：

JavaScript Code复制内容到剪贴板
document.getElementById(“helloButton”).onclick = function() {  
worker.postMessage(“Here’s a message for you”);  
}  
worker中：

JavaScript Code复制内容到剪贴板
worker.addEventListener(“message”, messageHandler, true);  
function messageHandler(e) {  
// process message from worker  
}  
错误处理：
在WebWorker中遇到未处理的异常，其error事件就会被触发。通常情况下我们应该监听WebWork的错误信息，方式如下：

JavaScript Code复制内容到剪贴板
function errorHandler(e) {  
console.log(e.message, e);  
}  
worker.addEventListener(“error”, errorHandler, true);  
停止WebWorker：
WebWorker不会自己停止。如果你想要回收WebWorker占用的资源，或者停止一个运行很长时间的WebWorker，可以调用如下方法：

JavaScript Code复制内容到剪贴板
worker.terminate();  

被终止的WebWorker不再会响应其他事件，也不会执行任何运算。另外被终止的WebWorker也不能重新启动，但是你可以使用相同的js文件重新建立一个WebWorker。


转载请注明：睿美印象网站建设工作室www.ruimeiyx.com