DIV CSS 佈局教程網

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復制內容到剪貼板

1. document.getElementById(“helloButton”).onclick = function() {  
2. worker.postMessage(“Here’s a message for you”);  
3. }  

worker中：

JavaScript Code復制內容到剪貼板

1. worker.addEventListener(“message”, messageHandler, true);  
2. function messageHandler(e) {  
3. // process message from worker  
4. }  

錯誤處理：
在WebWorker中遇到未處理的異常，其error事件就會被觸發。通常情況下我們應該監聽WebWork的錯誤信息，方式如下：

JavaScript Code復制內容到剪貼板

1. function errorHandler(e) {  
2. console.log(e.message, e);  
3. }  
4. worker.addEventListener(“error”, errorHandler, true);  

停止WebWorker：
WebWorker不會自己停止。如果你想要回收WebWorker占用的資源，或者停止一個運行很長時間的WebWorker，可以調用如下方法：

JavaScript Code復制內容到剪貼板

1. worker.terminate();  

被終止的WebWorker不再會響應其他事件，也不會執行任何運算。另外被終止的WebWorker也不能重新啟動，但是你可以使用相同的JS文件重新建立一個WebWorker。