首頁  >  文章  >  web前端  >  H5+WebWorkers多執行緒開發使用詳解

H5+WebWorkers多執行緒開發使用詳解

php中世界最好的语言
php中世界最好的语言原創
2018-05-07 17:38:122359瀏覽

這次帶給大家H5 WebWorkers多執行緒開發使用詳解,H5 WebWorkers多執行緒開發的注意事項有哪些,以下就是實戰案例,一起來看一下。

我們都知道,瀏覽器執行js程式碼是單執行緒的,當頁面腳步執行時,頁面是沒辦法回應別的的,直到腳步的結束,而這裡介紹的WebWorkers就可以改變這一切。

WebWorkers是運行在背景的js程式碼,獨立於其他腳本,不會影響頁面的效能。我們可以繼續做任何願意做的事情:點擊、選取內容等等,而此時WebWorkers在後台運行。

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

第一步:產生worker。

呼叫Worker()建構子,指定一個要在worker執行緒內執行的腳本的URI,例子是目前頁面指定worker執行緒執行的腳步為script -worker.js。

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

在script-worker.js裡面我們可以執行額外的程式碼,這些程式碼的執行不會影響頁面去幹別的你想乾的事情,這聽起來很棒。

第二步:傳遞資料。

頁面可以和worker互動傳遞數據,這樣worker在不影響頁面幹有意義的事情的情況下可以默默去計算,好了告訴一下頁面,使用這些數據。

//[主页面代码]
myWorker.postMessage("data-from-mainpage");
//[worker代码]
onmessage = function (oEvent) {
    console.log("主页面发送过来的数据是:"+oEvent.data));    
};

上面是【主頁面發送資料給worker腳本】的情況,是的,你看見了非常親切的postMessage,好吧,我喜歡這個東西。

 //[主页面代码]
 myWorker.onmessage = function (oEvent) {
     console.log("worker脚本发送过来的数据是:"+oEvent.data)); 
 }; 
//[worker代码]
postMessage("data-from-mainpage");

上面是【worker腳本發送資料給主頁】的情況,依舊很簡單,不過這些只是API,關鍵在於巧妙的使用才是有益的。

此外,可能worker執行會出錯,主頁透過:

myWorker.onerror=function(oEvent){};

可以監聽worker發生錯誤。

第三步:重要幾點。

worker執行緒能夠在不干擾UI的情況下執行任務,所執行的JavaScript程式碼完全在另一個作用域,與目前網頁中的程式碼不共享作用域。

Worker的全域作用域中提供了importScripts()方法,接收一個或多個指向JavaScript檔案的URL,載入過程都是非同步進行。

importScripts()只會在您提供絕對URI的情況下生效,執行程序也是非同步的。

當我們建立WebWorkers物件後,它會繼續監聽訊息(即使在外部腳本完成之後)直到其被終止為止,使用myWorker.terminate()方法可以終止WebWorkers,並釋放瀏覽器/電腦資源。

第四步:重要限制。

1.無法存取DOM節點,無法存取全域變數或是全域函數,法呼叫alert()或confirm之類的函數與無法存取window、document之類的瀏覽器全域變數;

#2.不過Web Worker中的Javascript仍可使用setTimeout(),setInterval()之類的函數,也可以使用XMLHttpRequest物件來做Ajax通訊。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

webpack打包壓縮js與css步驟詳解

jquery fullpage外掛程式新增頭部與尾部版權相關

以上是H5+WebWorkers多執行緒開發使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn