關于Web Workers你需要了解的七件事
介紹
Web Workers允許你在后臺運行JavaScript代碼，而不會阻止web用戶界面。Web Workers可以提高網頁的整體性能，還可以增強用戶體驗。Web Workers有兩種風格 ——專用Web Workers和共享Web Workers。本文討論了你所需要知道的Web worker的七個關鍵方面，幫助你決定在應用程序中使用它們的話。
1.Web Workers允許你在后臺運行JavaScript代碼
通常，你在Web頁面中編寫的JavaScript代碼在與用戶界面相同的線程中執行。這就是為什么當你點擊一個會觸發漫長處理過程的按鈕，網頁的用戶界面會凍結。除非處理完成，否則你就無法工作于用戶界面。Web worker允許你在后臺執行JavaScript，以便用戶界面保持響應，即使同時正在執行某些腳本。執行腳本的后臺線程通常稱為worker thread或worker。你可以生成盡可能多的worker，只要你想。你還可以將數據傳遞到正在worker thread中執行的腳本，并在完成時將值返回到主線程。然而，Web Workers有一些限制，如下所示：
- Web Workers無法從web頁面訪問DOM元素。
- Web Workers無法從web頁面訪問全局變量和JavaScript函數。
- Web Workers不能調用alert()或confirm()函數。
- 不能在Web Workers中訪問諸如窗口，文檔和parent這樣的對象。
但是，你可以使用setTimeout()，setInterval()等函數。你也可以使用XMLHttpRequest對象向服務器發出Ajax請求。
2.Web Workers有兩種類型
Web Workers有兩種類型：專用Web Workers和共享Web Workers。專用Web Workers隨同創建它們的網頁一起存在和死亡。這意味著在網頁中創建的專用Web Workers無法通過多個網頁訪問。另一方面，共享Web Workers在多個網頁之間是共享的。Worker類代表專用Web Workers，而SharedWorker類代表共享Web Workers。
在許多情況下，專用Web Workers就可以滿足你的需求。這是因為通常你需要在worker thread中執行一個網頁的特定腳本。然而，有時，你需要在worker thread中執行一個腳本，并且這個worker thread對多個網頁通用。在這種情況下，創建許多專用Web Workers，每個頁面一個，還不如使用共享Web Workers。由一個網頁創建的共享web worker仍然可用于其他網頁。只有當所有到它的連接被關閉，才能毀壞它。共享Web Workers比專用Web Workers更復雜一點。
3.Worker對象代表專用Web Worker
現在，你了解了Web Workers的基礎知識，讓我們看看如何使用專用Web Workers。下面討論的示例假設你已使用喜歡的開發工具創建了一個Web應用程序，并且還在其Script文件夾中添加了jQuery和Modernizr庫。將HTML頁面添加到web應用程序，然后鍵入以下代碼：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="scripts/modernizr.js"></script>
<script src="scripts/jquery-2.0.0.js"></script>
<script type="text/javascript"> $(document).ready(function () { if (!Modernizr.webworkers) { alert("This browser doesn't support Web Workers!"); return; } $("#btnStart").click(function () { var worker = new Worker("scripts/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處理的按鈕（btnStart）。請注意，該網頁引用了Modernizr和jQuery庫。<script>塊包括ready()方法處理程序，并且該處理程序又反過來處理btnStart的單擊事件。ready()處理程序首先檢查瀏覽器是否支持web workers。這通過使用Modernizr的webworkers屬性完成。如果瀏覽器不支持Web workers，則會向用戶顯示一條錯誤消息。
然后代碼連接btnStart的點擊事件處理程序。點擊事件處理程序的代碼很重要，因為它使用Worker對象在后臺運行腳本。點擊事件處理程序創建一個Worker對象并將其存儲在本地變量——worker中。要在后臺執行的JavaScript文件的路徑在構造函數中傳遞。你將很快創建LengthyTask.js。然后，代碼為Worker對象的消息事件添加一個事件處理程序。當目標腳本（在此情況下為LengthyTask.js）將一些值發送回網頁時，會引發消息事件。消息事件處理函數可以使用evt.data屬性來訪問返回的值。***，在Worker對象上調用postMessage()方法來觸發LengthyTask.js的執行。 postMessage()方法還允許你將數據傳遞到目標腳本。在此示例中，將一個數字（10000）傳遞給postMessage()，postMessage()指示處理應持續的毫秒數量。你可以傳遞postMessage()調用中的任何其他數據，如JavaScript對象或字符串。
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);
上面的代碼處理worker thread的消息事件。當主頁面調用Worker對象上的postMessage()方法時，會引發消息事件。消息事件處理程序通過運行某些毫秒的do-while循環來模擬冗長的處理。此循環運行的毫秒數從主頁傳遞（回憶前面討論的postMessage()）。因此，evt.data在此示例中返回10000。一旦長時間操作完成，代碼調用postMessage()會把處理結果發送回主頁面。在本例中，傳遞currentDate的值（currentDate是一個Date對象）。
如果你運行主網頁并單擊Start Processing按鈕，那么你將在10秒后收到alert()。同時，頁面的用戶界面不會被阻止，你可以執行諸如滾動，點擊等操作，表明來自LengthyTask.js的代碼正在后臺運行。
4. SharedWorker對象代表共享Web Worker
前面的示例使用了專用Web worker。讓我們將同樣的示例轉換為使用共享Web worker。共享Web worker由SharedWorker對象表示。下面的代碼顯示了來自主頁的代碼的修改版本：
$(document).ready(function () {
if (!Modernizr.webworkers)
{
alert("This browser doesn't support Web Workers!");
return;
}
$("#btnStart").click(function () {
var worker = new SharedWorker("scripts/sharedlengthytask.js"); worker.port.addEventListener("message", function (evt) { alert(evt.data); }, false); worker.port.start(); worker.port.postMessage(10000); });
});
注意用粗體字標記的代碼。它創建了一個SharedWorker實例，并在構造函數中傳遞SharedLengthyTask.js。你將很快創建此文件。然后，代碼將消息事件處理程序連接到SharedWorker對象的端口對象。消息處理程序函數執行與前面示例中相同的工作。然后代碼在端口對象上調用start()方法。***，在端口對象上調用postMessage()方法將數據（10000）發送到共享worker thread。
SharedLengthyTask.js文件包含以下代碼：
var port;
addEventListener("connect", function (evt) {
port = evt.ports[0];
port.addEventListener("message", function (evt) {
var date = new Date();
var currentDate = null;
do {
currentDate = new Date();
} while (currentDate - date < evt.data);
port.postMessage(currentDate);
}, false);
port.start();
}, false);
代碼首先聲明一個名為port的變量，用于存儲端口對象的引用。這次處理了兩個事件——connect和message。當與共享Web worker建立連接時，會觸發connect事件。 connect事件處理程序捕獲evt.port [0]對象并將其存儲在之前聲明的端口變量中。然后在端口對象上連接消息事件處理程序。調用端口對象的start()方法來開始偵聽該端口上的消息。消息事件處理程序幾乎與你在前面的示例中編寫的消息事件處理程序相同，除了它附加到端口對象這一點。此外，在端口對象上調用postMessage()，以將處理結果發送到主頁面。
5. Web Workers可以使用XMLHttpRequest與服務器通信
有時Web Worker可能需要與Web服務器通信。例如，你可能需要駐留在某些RDBMS中的數據以便于客戶端處理。要完成此類任務，你可以使用XMLHttpRequest對象向服務器端資源發出請求。實例化Worker對象和處理消息事件的整個過程保持不變。但是，你需要向服務器端資源發出GET或POST請求。考慮下面的代碼：
addEventListener("message", function (evt) {
var xhr = new XMLHttpRequest(); xhr.open("GET", "lengthytaskhandler.ashx"); xhr.onload = function () { postMessage(xhr.responseText); }; xhr.send(); }, false);
上面顯示的代碼創建了XMLHttpRequest對象的實例。然后調用open()方法，并指定向服務器端資源LengthyTaskHandler.ashx（一個ASP.NET通用處理程序）發出GET請求。（雖然此示例使用ASP.NET通用處理程序，但你可以使用任何其他服務器端資源。）然后它處理XMLHttpRequest對象的load事件并調用postMessage()。 xhr.responseText作為postMessage()的參數。xhr.responseText將是ASP.NET通用處理程序作為響應返回的值。請求完成時引發load事件。
LengthyTaskHandler.ashx包含以下代碼：
namespace WebWorkersDemo
{
public class LengthyTaskHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context) { System.Threading.Thread.Sleep(10000); context.Response.ContentType = "text/plain"; context.Response.Write("Processing successful!"); }
public bool IsReusable
{
get
{
return false;
}
}
}
}
正如你可以看到，ProcessRequest()通過在Thread類上調用Sleep()方法來模擬一些冗長的處理，并阻止執行10秒。然后它返回一個成功消息“Processing successful!”給調用者。如果你在進行這些更改后運行主網頁，你會發現在10秒后，將顯示一個包含此成功消息的警報對話框。
6.你可以使用錯誤事件捕獲未處理的錯誤
如果你的Web worker正在進行一些復雜的操作，那么你可能需要添加錯誤處理到主網頁代碼，以便在worker中出現任何未處理錯誤時，可以采取適當的操作。這可以通過處理Worker對象的錯誤事件來完成。每當work thread中存在任何未處理的錯誤時，就會拋出錯誤事件。以下代碼顯示了如何完成此操作：
$("#btnStart").click(function () {
var worker = new Worker("scripts/lengthytask.js");
worker.addEventListener("message", function (evt) {
alert(evt.data);
}, false);
worker.addEventListener("error", function (evt) { alert("Line #" + evt.lineno + " - " + evt.message + " in " + evt.filename); }, false); worker.postMessage(10000);
});
從上面的代碼可以看出，錯誤處理程序已經連接到worker對象的錯誤事件。錯誤處理函數接收一個事件對象，而該對象提供錯誤信息，例如發生錯誤的行號（evt.lineno），錯誤消息（evt.message）和發生錯誤的文件（evt.filename）。
7.你可以使用Terminate()方法終止worker
有時你可能會想要取消worker中正在執行的任務。對此，你可以通過調用其terminate()方法來摧毀Worker。一旦Worker終止，你就不能重新使用或重新啟動它。當然，你總是可以創建另一個Worker實例并使用它。但請記住，terminate()會立即殺死了worker，并且不會給你任何機執行清理操作。
總結
Web workers允許你在后臺執行腳本而不凍結網頁用戶界面。有兩種類型——專用web worker和共享web worker。每個網頁創建專用web worker，而跨多個網頁使用共享web worker共享。Worker類代表專用web worker，SharedWorker類代表共享web worker。本文介紹了如何使用這兩種類型，文中還討論了如何處理錯誤以及webworker如何使用XMLHttpRequest與web服務器通信。
譯文鏈接：http://www.codeceo.com/article/7-things-about-web-workers.html
英文原文：7 Things You Need To Know About Web Workers
