HTML5 Web Workers
web worker 是運行在後台的JavaScript，不會影響頁面的性能。
什麼是Web Worker？
當在HTML 頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。
web worker 是運行在後台的JavaScript，獨立於其他腳本，不會影響頁面的性能。 您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時web worker 在後台運行。
瀏覽器支持
Internet Explorer 10, Firefox, Chrome, Safari 和Opera 都支持Web workers.
HTML5 Web Workers 實例
下面的例子創建了一個簡單的web worker，在後台計數：
demo_workers.js 文件代碼：
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
檢測瀏覽器是否支持Web Worker
在創建web worker 之前，請檢測用戶的瀏覽器是否支持它：
{
// 是的! Web worker 支持!
//一些代碼.....
}
else
{
//抱歉! Web Worker 不支持
}
創建web worker 文件
現在，讓我們在一個外部JavaScript 中創建我們的web worker。
在這裡，我們創建了計數腳本。 該腳本存儲於"demo_workers.js" 文件中：
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
以上代碼中重要的部分是postMessage() 方法- 它用於向HTML 頁面傳回一段消息。
注意: web worker通常不用於如此簡單的腳本，而是用於更耗費CPU資源的任務。
創建Web Worker 對象
我們已經有了web worker 文件，現在我們需要從HTML 頁面調用它。
下面的代碼檢測是否存在worker，如果不存在，- 它會創建一個新的web worker 對象，然後運行"demo_workers.js" 中的代碼：
{
w=new Worker("demo_workers.js");
}
然後我們就可以從web worker 發生和接收消息了。
向web worker 添加一個"onmessage" 事件監聽器：
document.getElementById("result").innerHTML=event.data;
};
終止Web Worker
當我們創建web worker 對像後，它會繼續監聽消息（即使在外部腳本完成之後）直到其被終止為止。
如需終止web worker，並釋放瀏覽器/計算機資源，請使用terminate() 方法：
完整的Web Worker 實例代碼
我們已經看到了.js 文件中的Worker 代碼。 下面是HTML 頁面的代碼：
實例
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
</head>
<body>
<p>計數： <output id="result"></output></p>
<button onclick="startWorker()">開始工作</button>
<button onclick="stopWorker()">停止工作</button>
<p><strong>注意：</strong> Internet Explorer 9 及更早IE 版本瀏覽器不支持Web Workers.</p>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "抱歉，你的瀏覽器不支持Web Workers...";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>
嘗試一下»
Web Workers 和DOM
由於web worker 位於外部文件中，它們無法訪問下例JavaScript 對象：
- window 對象
- document 對象
- parent 對象