真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

淺談webWorker

一、webWorker之初體驗(yàn)

在"setTimeout那些事兒"中,說(shuō)到JavaScript是單線程。也就是同一時(shí)間只能做同一事情。

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供漢臺(tái)網(wǎng)站建設(shè)、漢臺(tái)做網(wǎng)站、漢臺(tái)網(wǎng)站設(shè)計(jì)、漢臺(tái)網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、漢臺(tái)企業(yè)網(wǎng)站模板建站服務(wù),十年漢臺(tái)做網(wǎng)站經(jīng)驗(yàn),不只是建網(wǎng)站,更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

也好理解,作為瀏覽器腳本語(yǔ)言,如果JavaScript不是單線程,那么就有點(diǎn)棘手了。比如,與用戶交互或者對(duì)DOM進(jìn)行操作時(shí),在一個(gè)線程上修改某個(gè)DOM,另外的線程刪除DOM,這時(shí)瀏覽器該如何抉擇呢?

所以,JavaScript是單線程也是有背景的。

如下:

淺談webWorker


    
        singleThread
        
    
    
        
    

淺談webWorker

但,HTML5引入了一個(gè)工作線程(webWorker)的概念。它允許開(kāi)發(fā)人員編寫(xiě)能夠長(zhǎng)時(shí)間運(yùn)行而不被用戶所中斷的后臺(tái)程序,去執(zhí)行事務(wù)或者邏輯,并同時(shí)保證頁(yè)面對(duì)用戶的響應(yīng)。

簡(jiǎn)而言之,就是允許JavaScript創(chuàng)建多個(gè)線程,但是子線程完全受主線程控制,且不得操作DOM。

從而,可以用webWorker來(lái)處理一些比較耗時(shí)的計(jì)算。

如下,主頁(yè)面:

淺談webWorker


    
        worker
        
        
    
    
        
    

淺談webWorker

下面是worker.js的內(nèi)容:

淺談webWorker

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í)間,通過(guò)postMessage發(fā)送回主線程postMessage('Before computing, '+new Date());
timedCount();//結(jié)束timedCount后,將結(jié)束時(shí)間發(fā)送回主線程postMessage('After computing, ' +new Date());

淺談webWorker

上面代碼執(zhí)行的流程是:創(chuàng)建的worker對(duì)象,并用onmessage方法接收worker.js里面postMessage傳遞過(guò)來(lái)的數(shù)據(jù)(event.data),并將數(shù)據(jù)追加到div#result中。

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

 淺談webWorker

                                                   圖一

 

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

 

淺談webWorker

                                                   圖二

二、webWorker之常用API

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

1、postMessage(data)

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

淺談webWorker

//worker = new Worker('url');//worker.postMessage傳遞給子線程數(shù)據(jù),對(duì)象worker.postMessage({first:1,second:2});//子線程中也可以使用postMessage,如傳遞字符串postMessage(‘test’);

淺談webWorker

2、terminate()

主線程中終止worker,此后無(wú)法再利用其進(jìn)行消息傳遞。注意:一旦terminate后,無(wú)法重新啟用,只能另外創(chuàng)建。

//worker = new Worker('url');worker.terminate();

如,主頁(yè)面:

淺談webWorker


    
        worker
        
        
    
    
        
    

淺談webWorker

子線程worker.js代碼:

//當(dāng)主線程發(fā)來(lái)信息后,觸發(fā)該message事件onmessage = function(event){    //向主線程發(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)獲取。

如下:

淺談webWorker

//worker = new Worker('url');worker.onerror = function(e){    //打印出錯(cuò)消息    console.log(e.message);    //中斷與子線程的聯(lián)系    worker.terminate();
}

淺談webWorker

另:worker線程從上到下同步運(yùn)行它的代碼,然后進(jìn)入異步階段來(lái)對(duì)事件及計(jì)時(shí)器響應(yīng),如果worker注冊(cè)了message事件處理程序,新航道托福只要其有可能觸發(fā),worker就一直在內(nèi)存中,不會(huì)退出,所以通信完畢后得手動(dòng)在主線程中terminate或者子線程中close掉但如果worker沒(méi)有監(jiān)聽(tīng)消息,那么當(dāng)所有任務(wù)執(zhí)行完畢(包括計(jì)數(shù)器)后,他就會(huì)退出。

三、worker上下文

先看下面這段代碼:

主頁(yè)面:

淺談webWorker


    
        worker
        
        
    
    
        
    

淺談webWorker

worker.js

淺談webWorker

//window對(duì)象的alert方法alert(1);
onmessage = function(event){    //向主線程發(fā)送event.data.name信息    postMessage(event.data.name);
};

淺談webWorker

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

淺談webWorker

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

worker.js執(zhí)行的上下文,與主頁(yè)面html執(zhí)行時(shí)的上下文并不相同,最頂層的對(duì)象并不是window,woker.js執(zhí)行的全局上下文,是個(gè)叫做WorkerGlobalScope的東東,所以無(wú)法訪問(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)線程被創(chuàng)建出來(lái)的時(shí)候與之關(guān)聯(lián)的 WorkerLocation 對(duì)象,它表示用于初始化這個(gè)工作線程的腳步資源的絕對(duì) URL,即使頁(yè)面被多次重定向后,這個(gè) URL 資源位置也不會(huì)改變。

3、close

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

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.可以訪問(wèn)navigator的部分屬性

局限性:

1.不能跨域加載JS

2.worker內(nèi)代碼不能訪問(wèn)DOM

3.各個(gè)瀏覽器對(duì)Worker的實(shí)現(xiàn)不大一致,例如FF里允許worker中創(chuàng)建新的worker,而Chrome中就不行

4.IE這個(gè)新特性


網(wǎng)站標(biāo)題:淺談webWorker
當(dāng)前鏈接:http://weahome.cn/article/jjjiss.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部