如何使用JS中的webWorker
所以，JavaScript是單線程也是有背景的。
如下：
<!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í)行棧’就沒結(jié)束，從而也就不會進(jìn)入到任務(wù)隊(duì)列中 alert(’waiting’);</script> </body></html>
但，HTML5引入了一個(gè)工作線程（webWorker）的概念。它允許開發(fā)人員編寫能夠長時(shí)間運(yùn)行而不被用戶所中斷的后臺程序，去執(zhí)行事務(wù)或者邏輯，并同時(shí)保證頁面對用戶的響應(yīng)。
簡而言之，就是允許JavaScript創(chuàng)建多個(gè)線程，但是子線程完全受主線程控制，且不得操作DOM。
從而，可以用webWorker來處理一些比較耗時(shí)的計(jì)算。
如下，主頁面：
<!DOCTYPE html> <head><title>worker</title><meta http-equiv='Content-Type' content='text/html; charset=utf-8'/><script> function init(){//創(chuàng)建一個(gè)Worker對象，并向它傳遞將在新線程中執(zhí)行的腳本urlvar worker = new Worker(’worker.js’);//接收worker傳遞過來的數(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ā)送回主線程 postMessage(sum);};//將執(zhí)行timedCount前的時(shí)間，通過postMessage發(fā)送回主線程postMessage(’Before computing, ’+new Date());timedCount();//結(jié)束timedCount后，將結(jié)束時(shí)間發(fā)送回主線程postMessage(’After computing, ’ +new Date());
上面代碼執(zhí)行的流程是：創(chuàng)建的worker對象，并用onmessage方法接收worker.js里面postMessage傳遞過來的數(shù)據(jù)(event.data)，并將數(shù)據(jù)追加到div#result中。
所以，執(zhí)行上面的代碼結(jié)果如下：
圖一
待worker.js中的timedCount方法運(yùn)算完后，執(zhí)行postMessage操作，向主線程傳數(shù)據(jù)，得圖二。期間，并不影響主線程的運(yùn)作。
圖二
二、webWorker之常用ＡＰＩ接下來，再來看看關(guān)于worker的常用API：
1、postMessage(data)子線程與主線程之間互相通信使用方法，傳遞的data為任意值。
//worker = new Worker(’url’);//worker.postMessage傳遞給子線程數(shù)據(jù)，對象worker.postMessage({first:1,second:2});//子線程中也可以使用postMessage，如傳遞字符串postMessage(‘test’);2、terminate()
主線程中終止worker，此后無法再利用其進(jìn)行消息傳遞。注意：一旦terminate后，無法重新啟用，只能另外創(chuàng)建。
//worker = new Worker(’url’);worker.terminate();
如，主頁面：
<!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毫秒，向子線程傳遞{name: ’monkey’}信息setInterval(function(){ worker.postMessage({name: ’monkey’});},100);//當(dāng)主線程worker收到來自子線程的消息后，觸發(fā)message事件worker.onmessage = function(event){ document.getElementById(’result’).innerHTML+=event.data+'<br/>' ; //主線程使用terminate方法中斷與子線程來往，在瀏覽器中只能顯示一次event.data worker.terminate();}; };</script> </head> <body onload = 'init()'><div id='result'></div> </body></html>
子線程worker.js代碼：
//當(dāng)主線程發(fā)來信息后，觸發(fā)該message事件onmessage = function(event){ //向主線程發(fā)送event.data.name信息 postMessage(event.data.name);};3、message
當(dāng)有消息發(fā)送時(shí)，觸發(fā)該事件。且，消息發(fā)送是雙向的，消息內(nèi)容可通過data來獲取。
message使用，可見terminate中的demo
4、error出錯(cuò)處理。且錯(cuò)誤消息可以通過e.message來獲取。
如下：
//worker = new Worker(’url’);worker.onerror = function(e){ //打印出錯(cuò)消息 console.log(e.message); //中斷與子線程的聯(lián)系 worker.terminate();}
另：worker線程從上到下同步運(yùn)行它的代碼，然后進(jìn)入異步階段來對事件及計(jì)時(shí)器響應(yīng)，如果worker注冊了message事件處理程序，只要其有可能觸發(fā)，worker就一直在內(nèi)存中，不會退出，所以通信完畢后得手動在主線程中terminate或者子線程中close掉，但如果worker沒有監(jiān)聽消息，那么當(dāng)所有任務(wù)執(zhí)行完畢（包括計(jì)數(shù)器）后，他就會退出。
三、worker上下文先看下面這段代碼：
主頁面：
<!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); //終止線程 worker.terminate();}; };</script> </head> <body onload = 'init()'> </body></html>
worker.js
//window對象的alert方法alert(1);onmessage = function(event){ //向主線程發(fā)送event.data.name信息 postMessage(event.data.name);};
執(zhí)行上面代碼結(jié)果：
為什么會這樣呢？原因是alert為window對象的方法，所以會報(bào)錯(cuò)undefined。
worker.js執(zhí)行的上下文，與主頁面html執(zhí)行時(shí)的上下文并不相同，最頂層的對象并不是window，woker.js執(zhí)行的全局上下文，是個(gè)叫做WorkerGlobalScope的東東，所以無法訪問window、與window相關(guān)的DOM API，但是可以與setTimeout、setInterval等協(xié)作。
WorkerGlobalScope作用域下的常用屬性、方法如下：
1、self
我們可以使用 WorkerGlobalScope 的 self 屬性來或者這個(gè)對象本身的引用
2、location
location 屬性返回當(dāng)線程被創(chuàng)建出來的時(shí)候與之關(guān)聯(lián)的 WorkerLocation 對象，它表示用于初始化這個(gè)工作線程的腳步資源的絕對 URL，即使頁面被多次重定向后，這個(gè) URL 資源位置也不會改變。
3、close
關(guān)閉當(dāng)前線程，與terminate作用類似
4、importScripts
我們可以通過importScripts()方法通過url在worker中加載庫函數(shù)
5、XMLHttpRequest
有了它，才能發(fā)出Ajax請求
6、setTimeout/setInterval以及addEventListener/postMessage
四、關(guān)于worker我們可以做什么：
1.可以加載一個(gè)JS進(jìn)行大量的復(fù)雜計(jì)算而不掛起主進(jìn)程，并通過postMessage，onmessage進(jìn)行通信
2.可以在worker中通過importScripts(url)加載另外的腳本文件
3.可以使用setTimeout(), clearTimeout(), setInterval(), and clearInterval()
4.可以使用XMLHttpRequest來發(fā)送請求
5.可以訪問navigator的部分屬性
局限性：
1.不能跨域加載JS
2.worker內(nèi)代碼不能訪問DOM
3.各個(gè)瀏覽器對Worker的實(shí)現(xiàn)不大一致，例如FF里允許worker中創(chuàng)建新的worker,而Chrome中就不行
4.IE這個(gè)新特性
以上就是淺談webWorker的詳細(xì)內(nèi)容，更多關(guān)于淺談webWorker的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. ASP基礎(chǔ)入門第三篇(ASP腳本基礎(chǔ))2. PHP循環(huán)與分支知識點(diǎn)梳理3. 解析原生JS getComputedStyle4. 前端從瀏覽器的渲染到性能優(yōu)化5. 無線標(biāo)記語言(WML)基礎(chǔ)之WMLScript 基礎(chǔ)第1/2頁6. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)7. ASP實(shí)現(xiàn)加法驗(yàn)證碼8. 讀大數(shù)據(jù)量的XML文件的讀取問題9. css代碼優(yōu)化的12個(gè)技巧10. 利用CSS3新特性創(chuàng)建透明邊框三角
網(wǎng)公網(wǎng)安備