一個web worker是在後台運行的JavaScript，不會影響頁面的性能。
什麼是Web Worker ？
當在HTML頁面中執行腳本，直到腳本完成的頁面不響應。
網絡工作者，由萬維網聯盟（W3C）和Web超文本應用技術工作組（WHATWG）定義，是從在後台運行，獨立於其他用戶界面腳本，HTML頁面中執行一個JavaScript腳本也可能是從同一個HTML頁面執行。 網絡工作者往往能夠更有效地利用多核CPU。
概觀
正如預想由WHATWG，網絡工作者是比較重的重量。 他們預計壽命長，具有較高的啟動性能成本，以及高每個實例存儲成本。
網站工作人員並不打算或期望大量使用，因為他們可以養豬的系統資源。
網絡工作者允許在後台運行更多的JavaScript線程瀏覽器線程的並發執行和一個或。 隨後執行的單個線程的瀏覽器將不得不等待JavaScript程序來完成，然後再繼續執行，這可能需要，程序員可能想從用戶隱藏顯著時間。
它允許瀏覽器繼續正常操作在後台運行的腳本時。 所述網絡工作者規格從HTML5規範作為單獨的規範，並且可以與HTML5使用。
有兩種類型的網絡工作者的：專用和共享的工人。
當網絡工作者在後台運行，他們沒有對DOM的直接訪問，但通過消息傳遞文檔通信。 這使得JavaScript程序的多線程執行。
瀏覽器支持
在表中的數字指定第一個瀏覽器版本完全支持Web Workers 。
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4 | 10.0 | 3.5 | 4 | 11.5 |
HTML Web Workers實例
下面的例子創建了一個簡單的web worker在後台計算的數字：
檢查Web Worker支持
在創建之前web worker ，檢查用戶的瀏覽器是否支持它：
if(typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
創建一個Web Worker文件
現在，讓我們創造我們的web worker在一個外部JavaScript。
在這裡，我們創建了一個計算腳本。 該腳本存儲在"/html/demo_workers.js"文件：
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i) ;
setTimeout("timedCount() ",500);
}
timedCount() ;
上面的代碼的重要的部分是postMessage()方法-它是用來發布消息返回到HTML頁面。
Note:通常情況下web workers不用於這種簡單的腳本，但對於更多的CPU密集型任務。
創建一個Web Worker對象
現在我們有了web worker文件，我們需要從一個HTML頁面調用它。
下面的幾行檢查，如果web worker已經存在，如果沒有-它會創建一個新的web worker的對象並運行代碼"/html/demo_workers.js"
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
}
然後我們可以發送和接收消息的web worker 。
一個加入"onmessage"事件監聽到web worker 。
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
當web worker發布消息，事件偵聽器內的代碼被執行。 從數據web worker存儲在event.data。
終止Web Worker
當一個web worker對象被創建，它將繼續偵聽消息(even after the external script is finished) ，直到它被終止。
要終止web worker ，以及免費的瀏覽器/計算機資源，使用terminate()方法：
w.terminate();
重用Web Worker
如果您在設置web worker變量定義，它已經終止後，您可以重用的代碼：
w = undefined;
全Web Worker示例代碼
我們已經看到了Web Worker代碼.js文件。 下面是HTML頁面的代碼：
例
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html> 試一試» Web Workers和DOM
由於web workers是在外部文件中，他們沒有訪問的JavaScript對象：
- 窗口對象
- 文檔對象
- 父對象