H5的多線程如何完成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頁面中，使用 <script>

標簽加載外部的JS文件，而<script>標簽還支持 跨域 加載JS。

在Web Worker中要注意！

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

但可以在worker.js中通過importScripts方法引入任何域下的腳本，如同HTML中的<script>標簽一樣。下面是合法的使用方法：

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中文網其它相關文章！

相關閱讀：

html5中的DOM編程的實現步驟

用h5做出微信的支付過程的實現步驟

用H5做有特效的下拉框

以上就是H5的多線程如何實現Web Worker的詳細內容，更多請關注php中文網其它相關文章！