Html5多線程開發(fā)之WebWorkers的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)Html5多線程開發(fā)之WebWorkers的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),大余企業(yè)網(wǎng)站建設(shè),大余品牌網(wǎng)站建設(shè),網(wǎng)站定制,大余網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,大余網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

我們都知道，瀏覽器執(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，加載過程都是異步進(jìn)行。

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通信。

關(guān)于“Html5多線程開發(fā)之WebWorkers的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

本文題目：Html5多線程開發(fā)之WebWorkers的示例分析
URL鏈接：http://www.jiaotiyi.com/article/ieohsc.html