HTML5之web workers_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
我要評(píng)論專用 Web Worker (Dedicated Web Worker) 提供了一個(gè)簡(jiǎn)單的方法使得 web 內(nèi)容能夠在后臺(tái)運(yùn)行腳本。一旦 worker 創(chuàng)建后，它可以向由它的創(chuàng)建者指定的事件監(jiān)聽函數(shù)傳遞消息，這樣該 worker 生成的所有任務(wù)就都會(huì)接收到這些消息。worker 線程能夠在不干擾 UI 的情況下執(zhí)行任務(wù)。另外，它還能夠使用XMLHttpRequest(雖然responseXML與channel 兩個(gè)屬性值始終是null)來執(zhí)行I/O 操作。本文通過提供例子和細(xì)節(jié)補(bǔ)全了前面的文檔。提供給 worker 的函數(shù)列出了 worker 所支持的函數(shù)。
Worker接口會(huì)生成真正的操作系統(tǒng)級(jí)別的線程，如果你不太小心，那么并發(fā)(concurrency)會(huì)對(duì)你的代碼產(chǎn)生有趣的影響。然而，對(duì)于 web worker 來說，與其他線程的通信點(diǎn)會(huì)被很小心的控制，這意味著你很難引起并發(fā)問題。你沒有辦法去訪問非線程安全的組件或者是 DOM，此外你還需要通過序列化對(duì)象來與線程交互特定的數(shù)據(jù)。所以你要是不費(fèi)點(diǎn)勁兒，還真搞不出錯(cuò)誤來。生成 worker
創(chuàng)建一個(gè)新的 worker 十分簡(jiǎn)單。你所要做的就是調(diào)用Worker()構(gòu)造函數(shù)，指定一個(gè)要在 worker 線程內(nèi)運(yùn)行的腳本的 URI，如果你希望能夠收到 worker 的通知，可以將 worker 的onmessage屬性設(shè)置成一個(gè)特定的事件處理函數(shù)。
var myWorker = new Worker("my_task.js");
myWorker.onmessage = function (oEvent) {
console.log("Called back by the worker!\n");
};
或者，你也可以使用addEventListener()：
var myWorker = new Worker("my_task.js");
myWorker.addEventListener("message", function (oEvent) {
console.log("Called back by the worker!\n");
}, false);
myWorker.postMessage(""); // start the worker.
例子中的第一行創(chuàng)建了一個(gè)新的 worker 線程。第三行為 worker 設(shè)置了message事件的監(jiān)聽函數(shù)。當(dāng) worker 調(diào)用自己的postMessage() 函數(shù)時(shí)就會(huì)調(diào)用這個(gè)事件處理函數(shù)。最后，第七行啟動(dòng)了 worker 線程。注意： 傳入Worker構(gòu)造函數(shù)的參數(shù) URI 必須遵循同源策略。目前，不同的瀏覽器制造商對(duì)于哪些 URI 應(yīng)該遵循同源策略尚有分歧；Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7) 及后續(xù)版本允許傳入 data URI，而 Internet Explorer 10 則不認(rèn)為 Blob URI 對(duì)于 worker 來說是一個(gè)有效的腳本。
傳遞數(shù)據(jù)
在主頁面與 worker 之間傳遞的數(shù)據(jù)是通過拷貝，而不是共享來完成的。傳遞給worker 的對(duì)象需要經(jīng)過序列化，接下來在另一端還需要反序列化。頁面與 worker不會(huì)共享同一個(gè)實(shí)例，最終的結(jié)果就是在每次通信結(jié)束時(shí)生成了數(shù)據(jù)的一個(gè)副本。大部分瀏覽器使用結(jié)構(gòu)化拷貝來實(shí)現(xiàn)該特性。
在往下進(jìn)行之前，出于教學(xué)的目的，讓我們創(chuàng)建一個(gè)名為emulateMessage()的函數(shù)，它將模擬在從worker到主頁面(反之亦然)的通信過程中，變量的「拷貝而非共享」行為：
function emulateMessage (vVal) {
return eval("(" + JSON.stringify(vVal) + ")");
}
// Tests
// test #1
var example1 = new Number(3);
alert(typeof example1); // object
alert(typeof emulateMessage(example1)); // number
// test #2
var example2 = true;
alert(typeof example2); // boolean
alert(typeof emulateMessage(example2)); // boolean
// test #3
var example3 = new String("Hello World");
alert(typeof example3); // object
alert(typeof emulateMessage(example3)); // string
// test #4
var example4 = {
"name": "John Smith",
"age": 43
};
alert(typeof example4); // object
alert(typeof emulateMessage(example4)); // object
// test #5
function Animal (sType, nAge) {
this.type = sType;
this.age = nAge;
}
var example5 = new Animal("Cat", 3);
alert(example5.constructor); // Animal
alert(emulateMessage(example5).constructor); // Object
拷貝而并非共享的那個(gè)值稱為消息。再來談?wù)剋orker，你可以使用postMessage() 將消息傳遞給主線程或從主線程傳送回來。message事件的data屬性就包含了從 worker 傳回來的數(shù)據(jù)。
example.html: (主頁面):
var myWorker = new Worker("my_task.js");
myWorker.onmessage = function (oEvent) {
console.log("Worker said : " + oEvent.data);
};
myWorker.postMessage("ali");
my_task.js (worker):
postMessage("I\'m working before postMessage(\'ali\').");
onmessage = function (oEvent) {
postMessage("Hi " + oEvent.data);
};
注意：通常來說，后臺(tái)線程 – 包括 worker –無法操作 DOM。如果后臺(tái)線程需要修改 DOM，那么它應(yīng)該將消息發(fā)送給它的創(chuàng)建者，讓創(chuàng)建者來完成這些操作。
如你所見，worker與主頁面之間傳輸?shù)南⑹冀K是「JSON 消息」，即使它是一個(gè)原始類型的值。所以，你完全可以傳輸JSON數(shù)據(jù) 和/或 任何能夠序列化的數(shù)據(jù)類型：
postMessage({"cmd": "init", "timestamp": Date.now()});
傳遞數(shù)據(jù)的例子
例子 #1： 創(chuàng)建一個(gè)通用的 「異步eval()」
下面這個(gè)例子介紹了，如何在 worker 內(nèi)使用eval()來按順序執(zhí)行異步的任何種類的 JavaScript 代碼：
// Syntax: asyncEval(code[, listener])
var asyncEval = (function () {
var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
oParser.onmessage = function (oEvent) {
if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
delete aListeners[oEvent.data.id];
};
return function (sCode, fListener) {
aListeners.push(fListener || null);
oParser.postMessage({
"id": aListeners.length - 1,
"code": sCode
});
};
})();
示例使用：
// asynchronous alert message...
asyncEval("3 + 2", function (sMessage) {
alert("3 + 2 = " + sMessage);
});
// asynchronous print message...
asyncEval("\"Hello World!!!\"", function (sHTML) {
document.body.appendChild(document.createTextNode(sHTML));
});
// asynchronous void...
asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");
例子 #2：傳輸 JSON 的高級(jí)方式和創(chuàng)建一個(gè)交換系統(tǒng)
如果你需要傳輸非常復(fù)雜的數(shù)據(jù)，還要同時(shí)在主頁與 Worker 內(nèi)調(diào)用多個(gè)方法，那么可以考慮創(chuàng)建一個(gè)類似下面的系統(tǒng)。
example.html(the main page):
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>MDN Example - Queryable worker</title>
<script type="text/javascript">
/*
QueryableWorker instances methods:
* sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
* postMessage(string or JSON Data): see Worker.prototype.postMessage()
* terminate(): terminates the Worker
* addListener(name, function): adds a listener
* removeListener(name): removes a listener
QueryableWorker instances properties:
* defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
*/
function QueryableWorker (sURL, fDefListener, fOnError) {
var oInstance = this, oWorker = new Worker(sURL), oListeners = {};
this.defaultListener = fDefListener || function () {};
oWorker.onmessage = function (oEvent) {
if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("vo42t30") && oEvent.data.hasOwnProperty("rnb93qh")) {
oListeners[oEvent.data.vo42t30].apply(oInstance, oEvent.data.rnb93qh);
} else {
this.defaultListener.call(oInstance, oEvent.data);
}
};
if (fOnError) { oWorker.onerror = fOnError; }
this.sendQuery = function (/* queryable function name, argument to pass 1, argument to pass 2, etc. etc */) {
if (arguments.length < 1) { throw new TypeError("QueryableWorker.sendQuery - not enough arguments"); return; }
oWorker.postMessage({ "bk4e1h0": arguments[0], "ktp3fm1": Array.prototype.slice.call(arguments, 1) });
};
this.postMessage = function (vMsg) {
//I just think there is no need to use call() method
//how about just oWorker.postMessage(vMsg);
//the same situation with terminate
//well,just a little faster,no search up the prototye chain
Worker.prototype.postMessage.call(oWorker, vMsg);
};
this.terminate = function () {
Worker.prototype.terminate.call(oWorker);
};
this.addListener = function (sName, fListener) {
oListeners[sName] = fListener;
};
this.removeListener = function (sName) {
delete oListeners[sName];
};
};
// your custom "queryable" worker
var oMyTask = new QueryableWorker("my_task.js" /* , yourDefaultMessageListenerHere [optional], yourErrorListenerHere [optional] */);
// your custom "listeners"
oMyTask.addListener("printSomething", function (nResult) {
document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + nResult + "!"));
});
oMyTask.addListener("alertSomething", function (nDeltaT, sUnit) {
alert("Worker waited for " + nDeltaT + " " + sUnit + " :-)");
});
</script>
</head>
<body>
<ul>
<li><a id="firstLink" href="javascript:oMyTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li>
<li><a href="javascript:oMyTask.sendQuery('waitSomething');">Wait 3 seconds</a></li>
<li><a href="javascript:oMyTask.terminate();">terminate() the Worker</a></li>
</ul>
</body>
</html>
my_task.js (the worker):
// your custom PRIVATE functions
function myPrivateFunc1 () {
// do something
}
function myPrivateFunc2 () {
// do something
}
// etc. etc.
// your custom PUBLIC functions (i.e. queryable from the main page)
var queryableFunctions = {
// example #1: get the difference between two numbers:
getDifference: function (nMinuend, nSubtrahend) {
reply("printSomething", nMinuend - nSubtrahend);
},
// example #2: wait three seconds
waitSomething: function () {
setTimeout(function() { reply("alertSomething", 3, "seconds"); }, 3000);
}
};
// system functions
function defaultQuery (vMsg) {
// your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly
// do something
}
function reply (/* listener name, argument to pass 1, argument to pass 2, etc. etc */) {
if (arguments.length < 1) { throw new TypeError("reply - not enough arguments"); return; }
postMessage({ "vo42t30": arguments[0], "rnb93qh": Array.prototype.slice.call(arguments, 1) });
}
onmessage = function (oEvent) {
if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("bk4e1h0") && oEvent.data.hasOwnProperty("ktp3fm1")) {
queryableFunctions[oEvent.data.bk4e1h0].apply(self, oEvent.data.ktp3fm1);
} else {
defaultQuery(oEvent.data);
}
};
這是一個(gè)非常合適的方法，用于切換 主頁-worker - 或是相反的 - 之間的消息。
通過轉(zhuǎn)讓所有權(quán)(可轉(zhuǎn)讓對(duì)象)來傳遞數(shù)據(jù)
Google Chrome 17 與 Firefox 18 包含另一種性能更高的方法來將特定類型的對(duì)象(可轉(zhuǎn)讓對(duì)象) 傳遞給一個(gè) worker/從 worker 傳回 ?？赊D(zhuǎn)讓對(duì)象從一個(gè)上下文轉(zhuǎn)移到另一個(gè)上下文而不會(huì)經(jīng)過任何拷貝操作。這意味著當(dāng)傳遞大數(shù)據(jù)時(shí)會(huì)獲得極大的性能提升。如果你從 C/C++ 世界來，那么把它想象成按照引用傳遞。然而與按照引用傳遞不同的是，一旦對(duì)象轉(zhuǎn)讓，那么它在原來上下文的那個(gè)版本將不復(fù)存在。該對(duì)象的所有權(quán)被轉(zhuǎn)讓到新的上下文內(nèi)。例如，當(dāng)你將一個(gè)ArrayBuffer對(duì)象從主應(yīng)用轉(zhuǎn)讓到Worker 中，原始的ArrayBuffer被清除并且無法使用。它包含的內(nèi)容會(huì)(完整無差的)傳遞給 Worker 上下文。
// Create a 32MB "file" and fill it.
var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
for (var i = 0; i < uInt8Array .length; ++i) {
uInt8Array[i] = i;
}
worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
生成subworker
如果需要的話 Worker 能夠生成更多的 Worker。這樣的被稱為 subworker，它們必須托管在與父頁面相同的源內(nèi)。同理，subworker 解析 URI 時(shí)會(huì)相對(duì)于父 worker 的地址而不是自身的頁面。這使得 worker 容易監(jiān)控它們的依賴關(guān)系。 Chrome 目前并不支持subworker。
嵌入式 worker
目前沒有一種「官方」的方法能夠像<script>元素一樣將 worker 的代碼嵌入的網(wǎng)頁中。但是如果一個(gè)<script>元素沒有src 特性，并且它的type特性沒有指定成一個(gè)可運(yùn)行的 mime-type，那么它就會(huì)被認(rèn)為是一個(gè)數(shù)據(jù)塊元素，并且能夠被 JavaScript 使用。「數(shù)據(jù)塊」是 HTML5 中一個(gè)十分常見的特性，它可以攜帶幾乎任何文本類型的數(shù)據(jù)。所以，你能夠以如下方式嵌入一個(gè) worker：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MDN Example - Embedded worker</title>
<script type="text/js-worker">
// 該腳本不會(huì)被 JS 引擎解析，因?yàn)樗?mime-type 是 text/js-worker。
var myVar = "Hello World!";
// 剩下的 worker 代碼寫到這里。
</script>
<script type="text/javascript">
// 該腳本會(huì)被 JS 引擎解析，因?yàn)樗?mime-type 是 text/javascript。
function pageLog (sMsg) {
// 使用 fragment：這樣瀏覽器只會(huì)進(jìn)行一次渲染/重排。
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">
// 該腳本不會(huì)被 JS 引擎解析，因?yàn)樗?mime-type 是 text/js-worker。
onmessage = function (oEvent) {
postMessage(myVar);
};
// 剩下的 worker 代碼寫到這里。
</script>
<script type="text/javascript">
// 該腳本會(huì)被 JS 引擎解析，因?yàn)樗?mime-type 是 text/javascript。
// 在過去...：
// 我們使用 blob builder
// ...但是現(xiàn)在我們使用 Blob...:
var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"});
// 創(chuàng)建一個(gè)新的 document.worker 屬性，包含所有 "text/js-worker" 腳本。
document.worker = new Worker(window.URL.createObjectURL(blob));
document.worker.onmessage = function (oEvent) {
pageLog("Received: " + oEvent.data);
};
// 啟動(dòng) worker.
window.onload = function() { document.worker.postMessage(""); };
</script>
</head>
<body><div id="logDisplay"></div></body>
</html>
現(xiàn)在，嵌入式 worker 已經(jīng)嵌套進(jìn)了一個(gè)自定義的document.worker屬性中。
超時(shí)與間隔
Worker 能夠像主線程一樣使用超時(shí)與間隔。這會(huì)十分有用，比如說，如果你想讓 worker 線程周期性而并非不間斷的運(yùn)行代碼。
終止 worker
如果你想立即終止一個(gè)運(yùn)行中的 worker，可以調(diào)用 worker 的terminate()方法：
myWorker.terminate();
worker 線程會(huì)被立即殺死，不會(huì)留下任何機(jī)會(huì)讓它完成自己的操作或清理工作。
Workers 也可以調(diào)用自己的nsIWorkerScope.close()方法來關(guān)閉自己：
self.close();
處理錯(cuò)誤
當(dāng) worker 出現(xiàn)運(yùn)行時(shí)錯(cuò)誤時(shí)，它的onerror事件處理函數(shù)會(huì)被調(diào)用。它會(huì)收到一個(gè)實(shí)現(xiàn)了ErrorEvent接口名為error的事件。該事件不會(huì)冒泡，并且可以被取消；為了防止觸發(fā)默認(rèn)動(dòng)作，worker 可以調(diào)用錯(cuò)誤事件的preventDefault()方法。錯(cuò)誤事件擁有下列三個(gè)它感興趣的字段：
message
可讀性良好的錯(cuò)誤消息。
filename
發(fā)生錯(cuò)誤的腳本文件名。
lineno
發(fā)生錯(cuò)誤時(shí)所在腳本文件的行號(hào)。
訪問 navigator 對(duì)象
Workers 可以在它的作用域內(nèi)訪問navigator對(duì)象。它含有如下能夠識(shí)別瀏覽器的字符串，就像在普通腳本中做的那樣：
- appName
- appVersion
- platform
- userAgent
引入腳本與庫
Worker 線程能夠訪問一個(gè)全局函數(shù)，importScripts()，該函數(shù)允許 worker 將腳本或庫引入自己的作用域內(nèi)。你可以不傳入?yún)?shù)，或傳入多個(gè)腳本的 URI 來引入；以下的例子都是合法的：
importScripts(); /* 什么都不引入 */
importScripts('foo.js'); /* 只引入 "foo.js" */
importScripts('foo.js', 'bar.js'); /* 引入兩個(gè)腳本 */
瀏覽器將列出的腳本加載并運(yùn)行。每個(gè)腳本中的全局對(duì)象都能夠被 worker 使用。如果腳本無法加載，將拋出NETWORK_ERROR異常，接下來的代碼也無法執(zhí)行。而之前執(zhí)行的代碼(包括使用window.setTimeout()延遲執(zhí)行的代碼)卻依然能夠使用。importScripts()之后的函數(shù)聲明依然能夠使用，因?yàn)樗鼈兪冀K會(huì)在其他代碼之前運(yùn)行。注意：腳本的下載順序不固定，但執(zhí)行時(shí)會(huì)按照你將文件名傳入到importScripts()中的順序。這是同步完成的；直到所有腳本都下載并運(yùn)行完畢，importScripts()才會(huì)返回。
例子
本節(jié)提供了幾個(gè)如何使用 DOM worker 的例子。
在后臺(tái)執(zhí)行運(yùn)算
worker 的一個(gè)優(yōu)勢(shì)在于能夠執(zhí)行處理器密集型的運(yùn)算而不會(huì)阻塞 UI 線程。在下面的例子中，worker 用于計(jì)算斐波那契數(shù)。
JavaScript 代碼
下面的 JavaScript 代碼保存在「fibonacci.js」文件中，與下一節(jié)的 HTML 文件關(guān)聯(lián)。
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設(shè)置為一個(gè)函數(shù)，當(dāng) worker 對(duì)象調(diào)用postMessage() 時(shí)該函數(shù)會(huì)接收到發(fā)送過來的信息。(注意，這么使用并不等同于定義一個(gè)同名的全局變量，或是定義一個(gè)同名的函數(shù)。var onmessage與function onmessage將會(huì)定義與該名字相同的全局屬性，但是它們不會(huì)注冊(cè)能夠接收從創(chuàng)建 worker 的網(wǎng)頁發(fā)送過來的消息的函數(shù)。) 這會(huì)啟用遞歸，生成自己的新拷貝來處理計(jì)算的每一個(gè)循環(huán)。
HTML 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test threads fibonacci</title>
</head>
<body>
<div id="result"></div>
<script language="javascript">
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>
網(wǎng)頁創(chuàng)建了一個(gè)div元素，ID 為result， 用它來顯示運(yùn)算結(jié)果，然后生成 worker。在生成 worker 后，onmessage處理函數(shù)配置為通過設(shè)置div元素的內(nèi)容來顯示運(yùn)算結(jié)果，然后onerror處理函數(shù)被設(shè)置為轉(zhuǎn)儲(chǔ)錯(cuò)誤信息。最后，向 worker 發(fā)送一條信息來啟動(dòng)它。
相關(guān)文章
這篇文章主要介紹了HTML5之多線程(Web Worker)的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-02- 這篇文章主要介紹了淺談Html5多線程開發(fā)之WebWorkers的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-02
- 這篇文章主要介紹了淺談HTML5 Web Worker的使用,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-05
- 這篇文章主要介紹了針對(duì)HTML5的Web Worker使用攻略,特別是結(jié)合worker拿手的JS使用起來十分有效,需要的朋友可以參考下2015-07-12
HTML5 Web Workers之網(wǎng)站也能多線程的實(shí)現(xiàn)
Web Workers 是在HTML5中新增的，用來在web應(yīng)用程序中實(shí)現(xiàn)后臺(tái)處理的一種技術(shù)2013-04-24突襲HTML5之Javascript API擴(kuò)展1—Web Worker異步執(zhí)行及相關(guān)概述
HTML5 中的 Web Worker 可以分為兩種不同線程類型，一個(gè)是專用線程 Dedicated Worker，一個(gè)是共享線程 Shared Worker。兩種類型的線程各有不同的用途,感興趣的朋友可以了解2013-01-31
在HTML5中，可以使用Web Worker創(chuàng)建一個(gè)后臺(tái)線程執(zhí)行一個(gè)耗時(shí)任務(wù)，本文主要介紹了HTML5 Web Worker(多線程處理)，感興趣的可以了解一下2023-01-12
