### 介紹
通過使用Web Worker， 我們可以在瀏覽器后臺運行JavaScript， 而不占用瀏覽器自身線程。Web Worker可以提高應用的總體性能，并且提升用戶體驗。如果你想在自己的Web應用中使用Web Worker， 不妨來了解一下有關Web Worker的7件事。
#### 1. Web Worker 可以讓你在后臺運行Javascript
一般來說Javascript和頁面的UI會共用一個線程，所以當點擊一個按鈕開始運行Javascript后，在這段代碼運行完畢之前，頁面是無法響應用戶操作的，換句話來說就是被“凍結”了。而這段代碼可以交給Web Worker在后臺運行，那么頁面在Javascript運行期間依然可以響應用戶操作。后臺會啟動一個worker線程來執行這段代碼，用戶可以創建多個worker線程。所以你可以在前臺做一些小規模分布式計算之類的工作，不過Web Worker有以下一些使用限制：
* Web Worker無法訪問DOM節點；
* Web Worker無法訪問全局變量或是全局函數；
* Web Worker無法調用alert()或者confirm之類的函數；
* Web Worker無法訪問window、document之類的瀏覽器全局變量；
不過Web Worker中的Javascript依然可以使用setTimeout(),setInterval()之類的函數，也可以使用XMLHttpRequest對象來做Ajax通信。
#### 2. 有兩種Web Worker
Web workers可分為兩種類型：專用線程dedicated web worker，以及共享線程shared web worker。 Dedicated web worker隨當前頁面的關閉而結束；這意味著Dedicated web worker只能被創建它的頁面訪問。與之相對應的Shared web worker可以被多個頁面訪問。在Javascript代碼中，“Work”類型代表Dedicated web worker，而“SharedWorker”類型代表Shared web worker。
在絕大多數情況下，使用Dedicated web worker就足夠了，因為一般來說在web worker中運行的代碼是專為當前頁面服務的。而在一些特定情況下，web worker可能運行的是更為普遍性的代碼，可以為多個頁面服務。在這種情況下，我們會創建一個共享線程的 Shared web worker，它可以被與之相關聯的多個頁面訪問，只有當所有關聯的的頁面都關閉的時候，該 Shared web worker 才會結束。相對Dedicated web worker，shared web worker稍微復雜些。
#### 3. “Worker”對象代表Dedicated Web Worker
現在來看如何使用Dedicated web worker。
下面的例子中用到了jQuery以及Modernizr作為Javascript庫，然后往HTML頁面中加入以下代碼：
~~~
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="script/modernizr.js"></script>
<script type="text/javascript" src="script/jquery-2.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if(!Modernizr.webworker){
alert("This browser doesn't support Web Worker!");
return;
}
$("#btnStart").click(function(){
var worker = new Worker("script/lengthytask.js");
worker.addEventListener("message", function(evt){
alert(evt.data);
}, false);
worker.postMessage(10000)
});
});
</script>
</head>
<body>
<form>
<input type="button" id="btnStart" value="Start Processing"/>
</form>
</body>
</html>
~~~
這個HTML頁面中有個按鈕，點擊后會運行一個Javascript文件。上面的代碼中首先檢測當前瀏覽器是否支持Web Worker，不支持的話，就跳出提醒信息。
按鈕的點擊事件中創建了Worker對象，并給它指定了Javascript腳本文件——lengthytask.js(稍后會有代碼)，并且給Worker對象綁定了一個“message”事件。該事件會在后臺代碼（lengthytask.js）向頁面返回數據時觸發。
“message”事件可以通過event.data來獲取后臺代碼傳回的數據。最后，postMessage方法正式執行lengthytask.js，該方法還可以向后臺代碼傳遞參數， 后臺代碼同樣通過message事件獲取該參數。
下面是lengthytask.js主要包含的代碼：
~~~
addEventListener("message", function(evt){
var date = new Date();
var currentDate = null;
do {
currentDate = new Date();
}while(currentDate - date < evt.data);
postMessage(currentDate);
}, false);
~~~
以上代碼在后臺監聽message時間，并獲取頁面傳來的參數：10000；這里實際上是一個計時函數：在message事件被觸發10000毫秒之后，把結果（currentDate）傳給頁面。
所以當點擊“Start Processing”按鈕，頁面會在10秒鐘后把當時的時刻alert出來。在這10秒鐘內頁面依然可以響應鼠標鍵盤事件。
#### 4. “SharedWorker”對象代表Shared Web Worker
前面的代碼使用的是dedicated web worker。 這一節會用shared web worker代替dedicated web worker，來區別兩者的不同。下面是同一個例子的shared web worker版本：
* * * * *
1. 原文：http://www.developer.com/lang/jscript/7-things-you-need-to-know-about-web-workers.html
2. 譯者： Rock（ruanqig@gmail.com）
3. 譯文：http://blog.csdn.net/dojotoolkit/article/details/25030289
