首頁 > 文章 > web前端 > H5的多執行緒如何實作Web Worker

H5的多執行緒如何實作Web Worker

php中世界最好的语言原創: 2017-12-04 10:39:461859瀏覽

很多人問過我，H5的多執行緒如何實現Web Worker的？當我們說到這個問題的時候首先你需要知道，什麼是Web Worker，那麼今天就來跟大家解答下這個問題。

將JavaScript程式碼交給Web Worker在背景執行時，頁面就可以在JavaScript執行期間依然可以回應使用者操作，以防止頁面卡死。使用者可以建立多個Worker線程，這樣就可以在前台做一些小規模分散式運算之類的工作。

分散式計算是一種計算方法，和集中式計算是相對的。隨著計算基數的發展，有些應用需要非常龐大的運算能力才能完成，如果採用集中式運算，需要耗費相當長的時間來完成。分散式計算將該應用分解成許多小的部分，並分配給多台計算機進行處理。這樣可以節省整體運算時間，大大提高運算效率。

而我上面所說的小規模分散式運算是對CPU多核心的高效利用。

執行緒中不能做的事情：

Web Worker無法存取DOM節點不能共用DOM是正常的，否則這邊在操作DOM，Worker那邊也在操作DOM，甚至把DOM刪除了，這不是衝突了？ Web Worker無法存取全域變數或是全域函數 Web Worker無法呼叫alert()或是confirm之類的函數Web Worker無法存取window、document之類的瀏覽器全域變數

執行緒中能做的事情：　

可以使用setTimeout()、clearTimeout()、setInterval()、clearInterval()等函數能使用navigator物件能使用XMLHttpRequest來傳送請求能使用Web Storage 能使用self取得本執行緒的作用域

Web Worker可分為兩種類型：專用執行緒（dedicated web worker），共享執行緒（shared web worker）。專用線程只能被創建它的頁面訪問，隨當前頁面的關閉而結束；而共享線程可以被多個頁面訪問，只有當所有關聯的頁面都關閉的時候才會結束。相對專用線程，共享線程稍微複雜一點。

偵測瀏覽器對Web Worker的支

if(typeof(Worker)!=="undefined")  {  
    // Yes! Web worker support!  
}  else  {  
    // Sorry! No Web Worker support..  
}

建立Web Worker物件及檔案：

下面估計是最簡單的入門等級的JS多執行緒Demo：

這裡寫圖片描述

建立執行緒

var worker = new Worker(url);//url為需要在執行緒執行的JavaScript檔案名稱及對應的路徑

執行緒通訊

在主執行緒與子執行緒間進行通信，使用的是執行緒物件的postMessage和onmessage方法。不管是誰向誰發送數據，發送方使用的都是postMessage方法，接收方都是使用的onmessage方法接收數據。 postMessage和onmessage都只有一個參數，假定onmessage的參數為event，則透過event.data取得收到的資料。

銷毀執行緒

在執行緒外部，使用執行緒實例的terminate方法銷毀執行緒在執行緒內部，使用close方法，執行緒自己銷毀自己

處理錯誤

當執行緒發生錯誤的時候，它的onerror事件回呼會被呼叫。

var worker = new Worker("test.js");
worker.onerror = function(event){
    console.log("load web worker error." + event);
}

傳送JSON資料

複雜的資料就用JSON傳送吧！

Web Worker中使用importScripts載入外部JS

在HTML頁面中，使用3f1c4e4b6b16bbbd69b2ee476dc4f83a

標籤載入外部的JS文件，而3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤還支援跨域加載JS。

在Web Worker中要注意！

Worker實例化的時候必須傳入一個腳本的URL，而這個URL必須是在本域下，否則會回報跨域錯誤！ var worker = new Worker('https://localhost/worker.js');

但可以在worker.js中透過importScripts方法引入任何網域下的腳本，如同HTML中的3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤一樣。以下是合法的使用方法：

importScripts(); /* imports nothing */ importScripts(‘foo.js’); /* imports just “foo.js” */ importScripts(‘foo.js’, ‘bar.js’); /* imports two scripts */ importScripts(‘//example.com/hello.js’); /* You can import scripts from other origins */
可以利用这里的importScripts方法解决资源预加载的问题（浏览器预先加载资源，而不会对资源进行解析和执行），道理也很简单。
Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into importScripts() . This is done synchronously; importScripts() does not return until all the scripts have been loaded and executed.
</script>

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！