主頁(yè) > 知識(shí)庫(kù) > 淺談Html5多線程開(kāi)發(fā)之WebWorkers

淺談Html5多線程開(kāi)發(fā)之WebWorkers

熱門(mén)標(biāo)簽:網(wǎng)站建設(shè) 美圖手機(jī) 檢查注冊(cè)表項(xiàng) 使用U盤(pán)裝系統(tǒng) 硅谷的囚徒呼叫中心 百度競(jìng)價(jià)點(diǎn)擊價(jià)格的計(jì)算公式 智能手機(jī) 阿里云

我們都知道,瀏覽器執(zhí)行js代碼是單線程的,當(dāng)頁(yè)面腳步執(zhí)行時(shí),頁(yè)面是沒(méi)辦法響應(yīng)別的的,直到腳步的結(jié)束,而這里介紹的WebWorkers就可以改變這一切。

WebWorkers是運(yùn)行在后臺(tái)的js代碼,獨(dú)立于其他腳本,不會(huì)影響頁(yè)面的性能。我們可以繼續(xù)做任何愿意做的事情:點(diǎn)擊、選取內(nèi)容等等,而此時(shí)WebWorkers在后臺(tái)運(yùn)行。

所有主流瀏覽器均支持 web worker,除了 Internet Explorer。

第一步:生成worker。

調(diào)用Worker()構(gòu)造函數(shù),指定一個(gè)要在worker線程內(nèi)運(yùn)行的腳本的URI,例子是當(dāng)前頁(yè)面指定worker線程執(zhí)行的腳步為script-worker.js。

var myWorker = new Worker("script-worker.js");

在script-worker.js里面我們可以執(zhí)行額外的代碼,這些代碼的執(zhí)行不會(huì)影響頁(yè)面去干別的你想干的事情,這聽(tīng)起來(lái)很棒。

第二步:傳遞數(shù)據(jù)。

頁(yè)面可以和worker交互傳遞數(shù)據(jù),這樣worker在不影響頁(yè)面干有意義的事情的情況下可以默默去計(jì)算,好了告訴一下頁(yè)面,使用這些數(shù)據(jù)。

//[主頁(yè)面代碼]
myWorker.postMessage("data-from-mainpage");

//[worker代碼]
onmessage = function (oEvent) {

    console.log("主頁(yè)面發(fā)送過(guò)來(lái)的數(shù)據(jù)是:"+oEvent.data));    
};

上面是【主頁(yè)面發(fā)送數(shù)據(jù)給worker腳本】的情況,是的,你看見(jiàn)了非常親切的postMessage,好吧,我喜歡這個(gè)東西。

 //[主頁(yè)面代碼]
 myWorker.onmessage = function (oEvent) {
 
     console.log("worker腳本發(fā)送過(guò)來(lái)的數(shù)據(jù)是:"+oEvent.data));
     
 }; 
//[worker代碼]
postMessage("data-from-mainpage");

上面是【worker腳本發(fā)送數(shù)據(jù)給主頁(yè)面】的情況,依舊很簡(jiǎn)單,不過(guò)這些只是API,關(guān)鍵在于巧妙的使用才是有益的。

此外,可能worker執(zhí)行會(huì)出錯(cuò),主頁(yè)面通過(guò):

myWorker.onerror=function(oEvent){};

可以監(jiān)聽(tīng)worker發(fā)生錯(cuò)誤。

第三步:重要幾點(diǎn)。

worker線程能夠在不干擾UI的情況下執(zhí)行任務(wù),所執(zhí)行的JavaScript代碼完全在另一個(gè)作用域,與當(dāng)前網(wǎng)頁(yè)中的代碼不共享作用域。

Worker的全局作用域中提供了importScripts()方法,接收一個(gè)或多個(gè)指向JavaScript文件的URL,加載過(guò)程都是異步進(jìn)行。

importScripts()只會(huì)在您提供絕對(duì)URI的情況下生效,執(zhí)行過(guò)程也是異步的。

當(dāng)我們創(chuàng)建WebWorkers對(duì)象后,它會(huì)繼續(xù)監(jiān)聽(tīng)消息(即使在外部腳本完成之后)直到其被終止為止,使用myWorker.terminate()方法可以終止WebWorkers,并釋放瀏覽器/計(jì)算機(jī)資源。

第四步:重要限制。

1.無(wú)法訪問(wèn)DOM節(jié)點(diǎn),無(wú)法訪問(wèn)全局變量或是全局函數(shù),法調(diào)用alert()或者confirm之類的函數(shù)和無(wú)法訪問(wèn)window、document之類的瀏覽器全局變量;

2.不過(guò)Web Worker中的Javascript依然可以使用setTimeout(),setInterval()之類的函數(shù),也可以使用XMLHttpRequest對(duì)象來(lái)做Ajax通信。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

標(biāo)簽:懷化 湖北 山南 黃山 煙臺(tái) 湘潭 通遼 賀州

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《淺談Html5多線程開(kāi)發(fā)之WebWorkers》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266