什么是Web Worker?
web worker 是運行在后台的 JavaScript,不占用瀏覽器自身線程,獨立於其他腳本,可以提高應用的總體性能,並且提升用戶體驗。
一般來說Javascript和UI頁面會共用一個線程,在HTML頁面中執行js腳本時,頁面的狀態是不可響應的,直到腳本已完成。而這段代碼可以交給Web Worker在后台運行,那么頁面在Javascript運行期間依然可以響應用戶操作。后台會啟動一個worker線程來執行這段代碼,用戶可以創建多個worker線程。
有兩種 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稍微復雜些。
new Worker()對象代表Dedicated Web Worker,以下示例代碼都為Dedicated Web Worker。
如何創建 Web Worker?
創建一個新的 worker 十分簡單。你所要做的就是調用 Worker()
構造函數,指定一個要在 worker 線程內運行的腳本的 URI,如果你希望能夠與worker進行通信,接收其傳遞回來的數據,可以將worker的onmessage
屬性設置成一個特定的事件處理函數,當 web worker 傳遞消息時,會執行事件監聽器中的代碼。event.data 中存有來自 worker 的數據。。
example.html: (主頁面):
var myWorker = new Worker("worker_demo.js"); myWorker.onmessage = function (event) { console.log("Called back by the worker!\n"); };
或者,也可以使用 addEventListener()添加事件監聽器:
var myWorker = new Worker("worker_demo.js"); myWorker.addEventListener("message", function (event) { console.log("Worker said : " + event.data); }, false); myWorker.postMessage("hello my worker"); // start the worker.
例子中的第一行創建了一個新的 worker 線程。第三行為 worker 設置了 message
事件的監聽函數。當 worker 調用自己的 postMessage() 函數時就會向后台Worker發送數據,並且后台返回消息調用message這個事件處理函數。
注意: 傳入 Worker
構造函數的參數 URI 必須遵循同源策略為了高效地傳輸 ArrayBuffer 對象數據,需要在 postMessage 方法中的第二個參數中指定它。實例代碼如下:
myWorker.postMessage({ operation: 'list_all_users', //ArrayBuffer object
input: buffer, threshold: 0.8, }, [buffer]);
worker_demo.js (worker):
postMessage("I\'m working before postMessage(\'hello my worker\')."); onmessage = function (event) { postMessage("Hi " + event.data); };
注意: 通常來說,后台線程 – 包括 worker – 無法操作 DOM。 如果后台線程需要修改 DOM,那么它應該將消息發送給它的創建者,讓創建者來完成這些操作。
通過Web Worker你可以在前台做一些小規模分布式計算之類的工作,不過Web Worker有以下一些使用限制:
- Web Worker無法訪問DOM節點;
- Web Worker無法訪問全局變量或是全局函數;
- Web Worker無法訪問window、document之類的瀏覽器全局變量、方法;
不過Web Worker作用域中依然可以使用有:
- 定時器相關方法 setTimeout(),clearTimeout(),setInterval()...之類的函數
- navigator對象,它含有如下能夠識別瀏覽器的字符串,就像在普通腳本中做的那樣,如:appName、appVersion、
userAgent
... - 引入腳本與庫,Worker 線程能夠訪問一個全局函數,
importScripts()
,該函數允許 worker 將腳本或庫引入自己的作用域內。你可以不傳入參數,或傳入多個腳本的 URI 來引入;以下的例子都是合法的:
importScripts(); /* 什么都不引入 */ importScripts('foo.js'); /* 只引入 "foo.js" */ importScripts('foo.js', 'bar.js'); /* 引入兩個腳本 */
NETWORK_ERROR
異常,接下來的代碼也無法執行。而之前執行的代碼(包括使用setTimeout延遲執行的代碼)卻依然能夠使用。importScripts()
之后的函數聲明依然能夠使用,因為它們始終會在其他代碼之前運行。
注意: 腳本的下載順序不固定,但執行時會按照你將文件名傳入到importScripts()
中的順序。這是同步完成的;直到所有腳本都下載並運行完畢,importScripts()
才會返回。 - atob() 、btoa() base64編碼與解碼的方法。
- 也可以使用XMLHttpRequest對象來做Ajax通信,以及其他API
:WebSocket、Promise、Worker(可以在Worker中使用Worker)
Web Worker使用XMLHttpRequest與服務端通信:
下面簡單寫下
addEventListener("message", function(evt){ var xhr = new XMLHttpRequest(); xhr.open("GET", "serviceUrl"); //serviceUrl為后端j返回son數據的接口 xhr.onload = function(){ postMessage(xhr.responseText); }; xhr.send(); },false);
上述舉例的代碼有些簡陋,只是為了拋磚引玉,見諒。其他API與Web Worker的融合使用也是大同小異,大家可以自己琢磨琢磨。
終止 web worker
如果你想立即終止一個運行中的 worker,可以調用 worker 的terminate()方法。被終止的Worker對象不能被重啟或重用,我們只能新建另一個Worker實例來執行新的任務。
myWorker.terminate();
處理錯誤
當 worker 出現運行時錯誤時,它的onerror
事件處理函數會被調用。它會收到一個實現了ErrorEvent
接口名為error
的事件,供開發者捕捉錯誤信息。下面的代碼展示了如何綁定error事件:
worker.addEventListener("error", function(evt){ alert("Line #" + evt.lineno + " - " + evt.message + " in " + evt.filename); }, false);
如上可見, Worker對象可以綁定error事件;而且evt對象中包含錯誤所在的代碼文件(evt.filename)、錯誤所在的代碼行數(evt.lineno)、以及錯誤信息(evt.message)。
下面上一個完整的dedicated web worker 使用案例。
demo_worker.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dedicated web worker</title>
</head>
<body>
<p>Count numbers: <output id="result"></output>
</p>
<button id="startWorker">startWorker</button>
<button id="endWorker">stopWorker</button>
</body>
<script> (function () { var result = document.querySelector('#result'), startWorker = document.querySelector('#startWorker'), endWorker = document.querySelector('#endWorker'), worker, data = 10; startWorker.addEventListener('click', function (event) {
if (typeof Worker !== 'undefined') { if (typeof worker == "undefined") { worker = new Worker('./demo_workers.js'); } worker.addEventListener('message', function (event) {
result.innerHTML = event.data; }, false); worker.addEventListener("error", function (event) { alert("Line #" + event.lineno + " - " + event.message + " in " + event.filename); }, false); worker.postMessage(data); endWorker.addEventListener('click', function () { worker.terminate(); }, false); } else { result.innerHTML = 'sry, your browser does not support Web workers...'; } }, false); })(); </script>
</html>
這個HTML頁面中有個startWorker按鈕,點擊后會運行一個Javascript文件。上面的代碼中首先檢測當前瀏覽器是否支持Web Worker,不支持的話就顯示提醒信息。
按鈕的點擊事件中創建了Worker對象,並給它指定了Javascript腳本文件——demo_workers.js(稍后會有代碼),並且給Worker對象綁定了一個“message”事件。該事件會在后台代碼(demo_workers.js)向頁面返回數據時觸發。“message”事件可以通過event.data來獲取后台代碼傳回的數據。最后,postMessage方法正式執行demo_workers.js,該方法向后台代碼傳遞參數,后台代碼同樣通過message事件參數的data屬性獲取。
demo_worker.js
addEventListener('message',function (event) {
var count = event.data; var interval = setInterval(function () { postMessage(count--);!count && clearInterval(interval); },1000); });
以上代碼在后台監聽message事件,並獲取頁面傳來的參數;這里實際上是一個從10到1的倒計時:在message事件被觸發之后,把結果傳給頁面顯示出來。
所以當點擊startWorker按鈕,頁面會在count number: 顯示從10遞減一變為最終的1,在這10秒鍾內頁面依然可以響應鼠標鍵盤事件。點擊stopWorker按鈕,web worker 會直接終止,頁面變化顯示會直接停止。
嵌入式web worker
目前沒有一種官方的方法能夠像script標簽一樣將 worker 的代碼嵌入的網頁中。但是如果一個script元素沒有指定src屬性,並且它的
type
沒有指定成一個可運行的 mime-type,那么它就會被認為是一個數據塊元素,並且能夠被 JavaScript 使用。數據塊是 HTML5 中一個十分常見的特性,它可以攜帶幾乎任何文本類型的數據。所以,你能夠以如下方式嵌入一個 worker:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MDN Example - Embedded worker</title>
<script type="text/js-worker">
// 該腳本不會被 JS 引擎解析,因為它的 mime-type 是 text/js-worker。
var myVar = "Hello World!"; // 剩下的 worker 代碼寫到這里。
</script>
<script type="text/javascript">
// 該腳本會被 JS 引擎解析,因為它的 mime-type 是 text/javascript。
function pageLog (sMsg) { // 使用 fragment:這樣瀏覽器只會進行一次渲染/重排。
var oFragm = document.createDocumentFragment(); oFragm.appendChild(document.createTextNode(sMsg)); oFragm.appendChild(document.createElement("br")); document.querySelector("#logDisplay").appendChild(oFragm); } </script>
<script type="text/js-worker">
// 該腳本不會被 JS 引擎解析,因為它的 mime-type 是 text/js-worker。
onmessage = function (oEvent) { postMessage(myVar); }; // 剩下的 worker 代碼寫到這里。
</script>
<script type="text/javascript">
// 該腳本會被 JS 引擎解析,因為它的 mime-type 是 text/javascript。
// 在過去...:
// 我們使用 blob builder
// ...但是現在我們使用 Blob...:
var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"}); // 創建一個新的 document.worker 屬性,包含所有 "text/js-worker" 腳本。
document.worker = new Worker(window.URL.createObjectURL(blob)); document.worker.onmessage = function (oEvent) { pageLog("Received: " + oEvent.data); }; // 啟動 worker.
window.onload = function() { document.worker.postMessage(""); }; </script>
</head>
<body><div id="logDisplay"></div></body>
</html>
現在,嵌入式 worker 已經嵌套進了一個自定義的 document.worker
屬性中。
在 worker 內創建 worker
worker 的一個優勢在於能夠執行處理器密集型的運算而不會阻塞 UI 線程。在下面的例子中,worker 用於計算斐波那契數。
fibonacci.js
var results = []; function resultReceiver(event) { results.push(parseInt(event.data)); if (results.length == 2) { postMessage(results[0] + results[1]); } } function errorReceiver(event) { throw event.data; } onmessage = function(event) { var n = parseInt(event.data); if (n == 0 || n == 1) { postMessage(n); return; } for (var i = 1; i <= 2; i++) { var worker = new Worker("fibonacci.js"); worker.onmessage = resultReceiver; worker.onerror = errorReceiver; worker.postMessage(n - i); } };
worker 將屬性onmessage
設置為一個函數,當worker對象調用 postMessage()時該函數會接收到發送過來的信息。
(注意,這么使用並不等同於定義一個同名的全局變量,或是定義一個同名的函數。var onmessage
與 function onmessage
將會定義與該名字相同的全局屬性,但是它們不會注冊能夠接收從創建 worker 的網頁發送過來的消息的函數。) 這會啟用遞歸,生成自己的新拷貝來處理計算的每一個循環。
fibonacci.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test threads fibonacci</title>
</head>
<body>
<div id="result"></div>
<script>
var worker = new Worker("fibonacci.js"); worker.onmessage = function(event) { document.getElementById("result").textContent = event.data; dump("Got: " + event.data + "\n"); }; worker.onerror = function(error) { dump("Worker error: " + error.message + "\n"); throw error; }; worker.postMessage("5"); </script>
</body>
</html>
網頁創建了一個div
元素,ID為result
,用它來顯示運算結果,然后生成worker。在生成worker后,onmessage
處理函數配置為通過設置div
元素的內容來顯示運算結果,最后,向worker發送一條信息來啟動它。
注意:chrome下不支持在worker中創建worker、以及dump方法、所以上述代碼可以在Firefox下運行。由於文章篇幅過長,關於共享線程shared web worker的介紹將在下篇文章Web Worker javascript多線程編程(二)發布。