如何使用JS中的webWorker
一、webWorker之初體驗(yàn)
所以，JavaScript是單線(xiàn)程也是有背景的。
如下：
<!DOCTYPE html>
<head>
<title>singleThread</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
//添加到任務(wù)隊(duì)列中，待同步任務(wù)所處的‘執(zhí)行棧'執(zhí)行完畢，1秒后執(zhí)行任務(wù)隊(duì)列中的這個(gè)匿名函數(shù)
setTimeout(function(){
console.log('come on');
},1000);
//只要不關(guān)閉該alert，‘執(zhí)行棧'就沒(méi)結(jié)束，從而也就不會(huì)進(jìn)入到任務(wù)隊(duì)列中
alert('waiting');
</script>
</body>
</html>
但，HTML5引入了一個(gè)工作線(xiàn)程（webWorker）的概念。它允許開(kāi)發(fā)人員編寫(xiě)能夠長(zhǎng)時(shí)間運(yùn)行而不被用戶(hù)所中斷的后臺(tái)程序，去執(zhí)行事務(wù)或者邏輯，并同時(shí)保證頁(yè)面對(duì)用戶(hù)的響應(yīng)。
簡(jiǎn)而言之，就是允許JavaScript創(chuàng)建多個(gè)線(xiàn)程，但是子線(xiàn)程完全受主線(xiàn)程控制，且不得操作DOM。
從而，可以用webWorker來(lái)處理一些比較耗時(shí)的計(jì)算。
如下，主頁(yè)面：
<!DOCTYPE html>
<head>
<title>worker</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script>
function init(){
//創(chuàng)建一個(gè)Worker對(duì)象，并向它傳遞將在新線(xiàn)程中執(zhí)行的腳本url
var worker = new Worker('worker.js');
//接收worker傳遞過(guò)來(lái)的數(shù)據(jù)
worker.onmessage = function(event){
document.getElementById('result').innerHTML+=event.data+"<br/>" ;
};
};
</script>
</head>
<body onload = "init()">
<div id="result"></div>
</body>
</html>
下面是worker.js的內(nèi)容:
var i = 0;
function timedCount(){
for(var j = 0, sum = 0; j < 100; j++){
for(var i = 0; i < 100000000; i++){
sum+=i;
};
};
//將得到的sum發(fā)送回主線(xiàn)程
postMessage(sum);
};
//將執(zhí)行timedCount前的時(shí)間，通過(guò)postMessage發(fā)送回主線(xiàn)程
postMessage('Before computing, '+new Date());
timedCount();
//結(jié)束timedCount后，將結(jié)束時(shí)間發(fā)送回主線(xiàn)程
postMessage('After computing, ' +new Date());
上面代碼執(zhí)行的流程是：創(chuàng)建的worker對(duì)象，并用onmessage方法接收worker.js里面postMessage傳遞過(guò)來(lái)的數(shù)據(jù)(event.data)，并將數(shù)據(jù)追加到div#result中。
所以，執(zhí)行上面的代碼結(jié)果如下：
圖一
待worker.js中的timedCount方法運(yùn)算完后，執(zhí)行postMessage操作，向主線(xiàn)程傳數(shù)據(jù)，得圖二。期間，并不影響主線(xiàn)程的運(yùn)作。
圖二
二、webWorker之常用ＡＰＩ
接下來(lái)，再來(lái)看看關(guān)于worker的常用API：
1、postMessage(data)
子線(xiàn)程與主線(xiàn)程之間互相通信使用方法，傳遞的data為任意值。
//worker = new Worker('url');
//worker.postMessage傳遞給子線(xiàn)程數(shù)據(jù)，對(duì)象
worker.postMessage({first:1,second:2});
//子線(xiàn)程中也可以使用postMessage，如傳遞字符串
postMessage(‘test');
2、terminate()
主線(xiàn)程中終止worker，此后無(wú)法再利用其進(jìn)行消息傳遞。注意：一旦terminate后，無(wú)法重新啟用，只能另外創(chuàng)建。
//worker = new Worker('url');
worker.terminate();
如，主頁(yè)面：
<!DOCTYPE html>
<head>
<title>worker</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script>
function init(){
var worker = new Worker('worker.js');
//每隔100毫秒，向子線(xiàn)程傳遞{name: 'monkey'}信息
setInterval(function(){
worker.postMessage({name: 'monkey'});
},100);
//當(dāng)主線(xiàn)程worker收到來(lái)自子線(xiàn)程的消息后，觸發(fā)message事件
worker.onmessage = function(event){
document.getElementById('result').innerHTML+=event.data+"<br/>" ;
//主線(xiàn)程使用terminate方法中斷與子線(xiàn)程來(lái)往，在瀏覽器中只能顯示一次event.data
worker.terminate();
};
};
</script>
</head>
<body onload = "init()">
<div id="result"></div>
</body>
</html>
子線(xiàn)程worker.js代碼：
//當(dāng)主線(xiàn)程發(fā)來(lái)信息后，觸發(fā)該message事件
onmessage = function(event){
//向主線(xiàn)程發(fā)送event.data.name信息
postMessage(event.data.name);
};
3、message
當(dāng)有消息發(fā)送時(shí)，觸發(fā)該事件。且，消息發(fā)送是雙向的，消息內(nèi)容可通過(guò)data來(lái)獲取。
message使用，可見(jiàn)terminate中的demo
4、error
出錯(cuò)處理。且錯(cuò)誤消息可以通過(guò)e.message來(lái)獲取。
如下：
//worker = new Worker('url');
worker.onerror = function(e){
//打印出錯(cuò)消息
console.log(e.message);
//中斷與子線(xiàn)程的聯(lián)系
worker.terminate();
}
另：worker線(xiàn)程從上到下同步運(yùn)行它的代碼，然后進(jìn)入異步階段來(lái)對(duì)事件及計(jì)時(shí)器響應(yīng)，如果worker注冊(cè)了message事件處理程序，只要其有可能觸發(fā)，worker就一直在內(nèi)存中，不會(huì)退出，所以通信完畢后得手動(dòng)在主線(xiàn)程中terminate或者子線(xiàn)程中close掉，但如果worker沒(méi)有監(jiān)聽(tīng)消息，那么當(dāng)所有任務(wù)執(zhí)行完畢（包括計(jì)數(shù)器）后，他就會(huì)退出。
三、worker上下文
先看下面這段代碼：
主頁(yè)面：
<!DOCTYPE html>
<head>
<title>worker</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script>
function init(){
var worker = new Worker('worker.js');
//接收消息事件
worker.onmessage = function(event){
console.log(event.data);
};
//錯(cuò)誤信息事件
worker.onerror = function(e){
console.log('erro: ' + e.message);
//終止線(xiàn)程
worker.terminate();
};
};
</script>
</head>
<body onload = "init()">
</body>
</html>
worker.js
//window對(duì)象的alert方法
alert(1);
onmessage = function(event){
//向主線(xiàn)程發(fā)送event.data.name信息
postMessage(event.data.name);
};
執(zhí)行上面代碼結(jié)果：
為什么會(huì)這樣呢？原因是alert為window對(duì)象的方法，所以會(huì)報(bào)錯(cuò)undefined。
worker.js執(zhí)行的上下文，與主頁(yè)面html執(zhí)行時(shí)的上下文并不相同，最頂層的對(duì)象并不是window，woker.js執(zhí)行的全局上下文，是個(gè)叫做WorkerGlobalScope的東東，所以無(wú)法訪(fǎng)問(wèn)window、與window相關(guān)的DOM API，但是可以與setTimeout、setInterval等協(xié)作。
WorkerGlobalScope作用域下的常用屬性、方法如下：
1、self
我們可以使用 WorkerGlobalScope 的 self 屬性來(lái)或者這個(gè)對(duì)象本身的引用
2、location
location 屬性返回當(dāng)線(xiàn)程被創(chuàng)建出來(lái)的時(shí)候與之關(guān)聯(lián)的 WorkerLocation 對(duì)象，它表示用于初始化這個(gè)工作線(xiàn)程的腳步資源的絕對(duì) URL，即使頁(yè)面被多次重定向后，這個(gè) URL 資源位置也不會(huì)改變。
3、close
關(guān)閉當(dāng)前線(xiàn)程，與terminate作用類(lèi)似
4、importScripts
我們可以通過(guò)importScripts()方法通過(guò)url在worker中加載庫(kù)函數(shù)
5、XMLHttpRequest
有了它，才能發(fā)出Ajax請(qǐng)求
6、setTimeout/setInterval以及addEventListener/postMessage
四、關(guān)于worker
我們可以做什么：
1.可以加載一個(gè)JS進(jìn)行大量的復(fù)雜計(jì)算而不掛起主進(jìn)程，并通過(guò)postMessage，onmessage進(jìn)行通信
2.可以在worker中通過(guò)importScripts(url)加載另外的腳本文件
3.可以使用setTimeout(), clearTimeout(), setInterval(), and clearInterval()
4.可以使用XMLHttpRequest來(lái)發(fā)送請(qǐng)求
5.可以訪(fǎng)問(wèn)navigator的部分屬性
局限性：
1.不能跨域加載JS
2.worker內(nèi)代碼不能訪(fǎng)問(wèn)DOM
3.各個(gè)瀏覽器對(duì)Worker的實(shí)現(xiàn)不大一致，例如FF里允許worker中創(chuàng)建新的worker,而Chrome中就不行
4.IE這個(gè)新特性
以上就是淺談webWorker的詳細(xì)內(nèi)容，更多關(guān)于淺談webWorker的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了JS閉包與延遲求值,結(jié)合簡(jiǎn)單實(shí)例分析了JS針對(duì)運(yùn)算量較大的情況下閉包與延遲求值的實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-12-12
這篇文章介紹了原生JS可拖動(dòng)彈窗效果實(shí)例代碼，有需要的朋友可以參考一下2013-11-11
使用Asp.net+Javascript控制的日期控件，需要的朋友可以參考下。2010-05-05
解析arp病毒背后利用的Javascript技術(shù)附解密方法
解析arp病毒背后利用的Javascript技術(shù)附解密方法...2007-08-08
JavaScript使用cookie實(shí)現(xiàn)記住賬號(hào)密碼功能
這篇文章主要介紹了JavaScript使用cookie實(shí)現(xiàn)記住賬號(hào)密碼功能,本文直接給出完整測(cè)試代碼,需要的朋友可以參考下2015-04-04
一步快速解決微信小程序中textarea層級(jí)太高遮擋其他組件
這篇文章主要給大家介紹了關(guān)于如何通過(guò)一步快速解決微信小程序中textarea層級(jí)太高遮擋其他組件問(wèn)題的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
小程序?qū)崿F(xiàn)訂單倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)訂單倒計(jì)時(shí)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-04-04
基于PHP pthreads實(shí)現(xiàn)多線(xiàn)程代碼實(shí)例
這篇文章主要介紹了基于PHP pthreads實(shí)現(xiàn)多線(xiàn)程代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
詳解JavaScript數(shù)組過(guò)濾相同元素的5種方法
本篇文章主要介紹了詳解JavaScript數(shù)組過(guò)濾相同元素的5種方法，詳細(xì)的介紹了5種實(shí)用方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05
前端下載文件方法很多,url是文件地址,下面這篇文章主要給大家介紹了關(guān)于JS通過(guò)URL下載文件并重命名的兩種方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11