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