电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

如何使用JS中的webWorker

瀏覽:122日期:2024-03-26 10:44:45
目錄一、webWorker之初體驗(yàn)二、webWorker之常用API1、postMessage(data)2、terminate()3、message4、error三、worker上下文四、關(guān)于worker一、webWorker之初體驗(yàn)

所以,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é)束,從而也就不會(huì)進(jìn)入到任務(wù)隊(duì)列中 alert(’waiting’);</script> </body></html>

但,HTML5引入了一個(gè)工作線程(webWorker)的概念。它允許開發(fā)人員編寫能夠長時(shí)間運(yùn)行而不被用戶所中斷的后臺(tái)程序,去執(zhí)行事務(wù)或者邏輯,并同時(shí)保證頁面對(duì)用戶的響應(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對(duì)象,并向它傳遞將在新線程中執(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對(duì)象,并用onmessage方法接收worker.js里面postMessage傳遞過來的數(shù)據(jù)(event.data),并將數(shù)據(jù)追加到div#result中。

所以,執(zhí)行上面的代碼結(jié)果如下:

如何使用JS中的webWorker

圖一

待worker.js中的timedCount方法運(yùn)算完后,執(zhí)行postMessage操作,向主線程傳數(shù)據(jù),得圖二。期間,并不影響主線程的運(yùn)作。

如何使用JS中的webWorker

圖二

二、webWorker之常用API

接下來,再來看看關(guān)于worker的常用API:

1、postMessage(data)

子線程與主線程之間互相通信使用方法,傳遞的data為任意值。

//worker = new Worker(’url’);//worker.postMessage傳遞給子線程數(shù)據(jù),對(duì)象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)入異步階段來對(duì)事件及計(jì)時(shí)器響應(yīng),如果worker注冊(cè)了message事件處理程序,只要其有可能觸發(fā),worker就一直在內(nèi)存中,不會(huì)退出,所以通信完畢后得手動(dòng)在主線程中terminate或者子線程中close掉,但如果worker沒有監(jiān)聽消息,那么當(dāng)所有任務(wù)執(zhí)行完畢(包括計(jì)數(shù)器)后,他就會(huì)退出。

三、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對(duì)象的alert方法alert(1);onmessage = function(event){ //向主線程發(fā)送event.data.name信息 postMessage(event.data.name);};

執(zhí)行上面代碼結(jié)果:

如何使用JS中的webWorker

為什么會(huì)這樣呢?原因是alert為window對(duì)象的方法,所以會(huì)報(bào)錯(cuò)undefined。

worker.js執(zhí)行的上下文,與主頁面html執(zhí)行時(shí)的上下文并不相同,最頂層的對(duì)象并不是window,woker.js執(zhí)行的全局上下文,是個(gè)叫做WorkerGlobalScope的東東,所以無法訪問window、與window相關(guān)的DOM API,但是可以與setTimeout、setInterval等協(xié)作。

WorkerGlobalScope作用域下的常用屬性、方法如下:

1、self

我們可以使用 WorkerGlobalScope 的 self 屬性來或者這個(gè)對(duì)象本身的引用

2、location

location 屬性返回當(dāng)線程被創(chuàng)建出來的時(shí)候與之關(guān)聯(lián)的 WorkerLocation 對(duì)象,它表示用于初始化這個(gè)工作線程的腳步資源的絕對(duì) URL,即使頁面被多次重定向后,這個(gè) URL 資源位置也不會(huì)改變。

3、close

關(guān)閉當(dāng)前線程,與terminate作用類似

4、importScripts

我們可以通過importScripts()方法通過url在worker中加載庫函數(shù)

5、XMLHttpRequest

有了它,才能發(fā)出Ajax請(qǐng)求

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ā)送請(qǐng)求

5.可以訪問navigator的部分屬性

局限性:

1.不能跨域加載JS

2.worker內(nèi)代碼不能訪問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)注好吧啦網(wǎng)其它相關(guān)文章!

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 手表腕表维修保养鉴定售后服务中心网点 - 名表维修保养 | 杭州月嫂技术培训服务公司-催乳师培训中心报名费用-产后康复师培训机构-杭州优贝姆健康管理有限公司 | 世界箱包品牌十大排名,女包小众轻奢品牌推荐200元左右,男包十大奢侈品牌排行榜双肩,学生拉杆箱什么品牌好质量好 - Gouwu3.com | 锥形螺带干燥机(新型耙式干燥机)百科-常州丰能干燥工程 | 济南保安公司加盟挂靠-亮剑国际安保服务集团总部-山东保安公司|济南保安培训学校 | 金属切削液-脱水防锈油-电火花机油-抗磨液压油-深圳市雨辰宏业科技发展有限公司 | 首页_欧瑞传动官方网站--主营变频器、伺服系统、新能源、软起动器、PLC、HMI | 润东方环保空调,冷风机,厂房车间降温设备-20年深圳环保空调生产厂家 | SDG吸附剂,SDG酸气吸附剂,干式酸性气体吸收剂生产厂家,超过20年生产使用经验。 - 富莱尔环保设备公司(原名天津市武清县环保设备厂) | 无机纤维喷涂棉-喷涂棉施工工程-山东华泉建筑工程有限公司▲ | 洁净棚-洁净工作棚-无菌室-净化工程公司_北京卫护科技有限公司 | 广州番禺搬家公司_天河黄埔搬家公司_企业工厂搬迁_日式搬家_广州搬家公司_厚道搬迁搬家公司 | 变色龙PPT-国内原创PPT模板交易平台 - PPT贰零 - 西安聚讯网络科技有限公司 | 防爆电机-高压防爆电机-ybx4电动机厂家-河南省南洋防爆电机有限公司 | 细砂提取机,隔膜板框泥浆污泥压滤机,螺旋洗砂机设备,轮式洗砂机械,机制砂,圆锥颚式反击式破碎机,振动筛,滚筒筛,喂料机- 上海重睿环保设备有限公司 | LZ-373测厚仪-华瑞VOC气体检测仪-个人有毒气体检测仪-厂家-深圳市深博瑞仪器仪表有限公司 | 隧道窑炉,隧道窑炉厂家-山东艾瑶国际贸易| 武汉不干胶印刷_标签设计印刷_不干胶标签印刷厂 - 武汉不干胶标签印刷厂家 | 理化生实验室设备,吊装实验室设备,顶装实验室设备,实验室成套设备厂家,校园功能室设备,智慧书法教室方案 - 东莞市惠森教学设备有限公司 | 包头市鑫枫装饰有限公司 | 伟秀电气有限公司-10kv高低压开关柜-高低压配电柜-中置柜-充气柜-欧式箱变-高压真空断路器厂家 | 学校用栓剂模,玻璃瓶轧盖钳,小型安瓿熔封机,实验室安瓿熔封机-长沙中亚制药设备有限公司 | 路斯特伺服驱动器维修,伦茨伺服驱动器维修|万骏自动化百科 | 成都中天自动化控制技术有限公司 | 真空泵维修保养,普发,阿尔卡特,荏原,卡西亚玛,莱宝,爱德华干式螺杆真空泵维修-东莞比其尔真空机电设备有限公司 | 激光内雕_led玻璃_发光玻璃_内雕玻璃_导光玻璃-石家庄明晨三维科技有限公司 激光内雕-内雕玻璃-发光玻璃 | 碳纤维复合材料制品生产定制工厂订制厂家-凯夫拉凯芙拉碳纤维手机壳套-碳纤维雪茄盒外壳套-深圳市润大世纪新材料科技有限公司 | Akribis直线电机_直线模组_力矩电机_直线电机平台|雅科贝思Akribis-杭州摩森机电科技有限公司 | 齿轮减速马达一体式_蜗轮蜗杆减速机配电机-德国BOSERL齿轮减速电动机生产厂家 | 北京公积金代办/租房发票/租房备案-北京金鼎源公积金提取服务中心 | TPU薄膜_TPU薄膜生产厂家_TPU热熔胶膜厂家定制_鑫亘环保科技(深圳)有限公司 | 上海电子秤厂家,电子秤厂家价格,上海吊秤厂家,吊秤供应价格-上海佳宜电子科技有限公司 | 双齿辊破碎机-大型狼牙破碎机视频-对辊破碎机价格/型号图片-金联机械设备生产厂家 | 钢结构-钢结构厂房-钢结构工程[江苏海逵钢构厂] | 柔性测斜仪_滑动测斜仪-广州杰芯科技有限公司 | 小型UV打印机-UV平板打印机-大型uv打印机-UV打印机源头厂家 |松普集团 | 体坛网_体坛+_体坛周报新闻客户端 | bkzzy在职研究生网 - 在职研究生招生信息咨询平台 | 防腐木批发价格_深圳_惠州_东莞防腐木厂家_森源(深圳)防腐木有限公司 | 防火窗_耐火窗_防火门厂家_防火卷帘门-重庆三乐门业有限公司 | TPE塑胶原料-PPA|杜邦pom工程塑料、PPSU|PCTG材料、PC/PBT价格-悦诚塑胶 |