我們都知道,瀏覽器執(zhí)行js代碼是單線程的,當(dāng)頁面腳步執(zhí)行時,頁面是沒辦法響應(yīng)別的的,直到腳步的結(jié)束,而這里介紹的WebWorkers就可以改變這一切。
WebWorkers是運行在后臺的js代碼,獨立于其他腳本,不會影響頁面的性能。我們可以繼續(xù)做任何愿意做的事情:點擊、選取內(nèi)容等等,而此時WebWorkers在后臺運行。
所有主流瀏覽器均支持 web worker,除了 Internet Explorer。
第一步:生成worker。
調(diào)用Worker()構(gòu)造函數(shù),指定一個要在worker線程內(nèi)運行的腳本的URI,例子是當(dāng)前頁面指定worker線程執(zhí)行的腳步為script-worker.js。
var myWorker = new Worker("script-worker.js");
在script-worker.js里面我們可以執(zhí)行額外的代碼,這些代碼的執(zhí)行不會影響頁面去干別的你想干的事情,這聽起來很棒。
第二步:傳遞數(shù)據(jù)。
頁面可以和worker交互傳遞數(shù)據(jù),這樣worker在不影響頁面干有意義的事情的情況下可以默默去計算,好了告訴一下頁面,使用這些數(shù)據(jù)。
//[主頁面代碼]
myWorker.postMessage("data-from-mainpage");
//[worker代碼]
onmessage = function (oEvent) {
console.log("主頁面發(fā)送過來的數(shù)據(jù)是:"+oEvent.data));
};
上面是【主頁面發(fā)送數(shù)據(jù)給worker腳本】的情況,是的,你看見了非常親切的postMessage,好吧,我喜歡這個東西。
//[主頁面代碼]
myWorker.onmessage = function (oEvent) {
console.log("worker腳本發(fā)送過來的數(shù)據(jù)是:"+oEvent.data));
};
//[worker代碼]
postMessage("data-from-mainpage");
上面是【worker腳本發(fā)送數(shù)據(jù)給主頁面】的情況,依舊很簡單,不過這些只是API,關(guān)鍵在于巧妙的使用才是有益的。
此外,可能worker執(zhí)行會出錯,主頁面通過:
myWorker.onerror=function(oEvent){};
可以監(jiān)聽worker發(fā)生錯誤。
第三步:重要幾點。
worker線程能夠在不干擾UI的情況下執(zhí)行任務(wù),所執(zhí)行的JavaScript代碼完全在另一個作用域,與當(dāng)前網(wǎng)頁中的代碼不共享作用域。
Worker的全局作用域中提供了importScripts()方法,接收一個或多個指向JavaScript文件的URL,加載過程都是異步進行。
importScripts()只會在您提供絕對URI的情況下生效,執(zhí)行過程也是異步的。
當(dāng)我們創(chuàng)建WebWorkers對象后,它會繼續(xù)監(jiān)聽消息(即使在外部腳本完成之后)直到其被終止為止,使用myWorker.terminate()方法可以終止WebWorkers,并釋放瀏覽器/計算機資源。
第四步:重要限制。
1.無法訪問DOM節(jié)點,無法訪問全局變量或是全局函數(shù),法調(diào)用alert()或者confirm之類的函數(shù)和無法訪問window、document之類的瀏覽器全局變量;
2.不過Web Worker中的Javascript依然可以使用setTimeout(),setInterval()之類的函數(shù),也可以使用XMLHttpRequest對象來做Ajax通信。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。