H5的多線程如何完成Web Worker

將JavaScript代碼交給Web Worker在后臺(tái)執(zhí)行時(shí)，頁面就可以在JavaScript運(yùn)行期間依然可以響應(yīng)用戶操作，以防止出現(xiàn)頁面卡死。用戶可以創(chuàng)建多個(gè)Worker線程，這樣就可以在前臺(tái)做一些小規(guī)模分布式計(jì)算之類的工作。

分布式計(jì)算是一種計(jì)算方法，和集中式計(jì)算是相對(duì)的。隨著計(jì)算基數(shù)的發(fā)展，有些應(yīng)用需要非常巨大的計(jì)算能力才能完成，如果采用集中式計(jì)算，需要耗費(fèi)相當(dāng)長的時(shí)間來完成。分布式計(jì)算將該應(yīng)用分解成許多小的部分，分配給多臺(tái)計(jì)算機(jī)進(jìn)行處理。這樣可以節(jié)約整體計(jì)算時(shí)間，大大提高計(jì)算效率。

而我上面所說的小規(guī)模分布式計(jì)算是對(duì)CPU多核的高效利用。

線程中不能做的事情：

Web Worker無法訪問DOM節(jié)點(diǎn) 不能共享DOM是正常的，否則這邊在操作DOM，Worker那邊也在操作DOM，甚至把DOM刪除了，這不是沖突了嘛？ Web Worker無法訪問全局變量或是全局函數(shù) Web Worker無法調(diào)用alert()或者confirm之類的函數(shù) Web Worker無法訪問window、document之類的瀏覽器全局變量

線程中能做的事情：　

能使用setTimeout()、clearTimeout()、setInterval()、clearInterval()等函數(shù) 能使用navigator對(duì)象 能使用XMLHttpRequest來發(fā)送請(qǐng)求 能使用Web Storage 能使用self獲取本線程的作用域

Web Worker可分為兩種類型：專用線程（dedicated web worker），共享線程（shared web worker）。專用線程只能被創(chuàng)建它的頁面訪問，隨當(dāng)前頁面的關(guān)閉而結(jié)束；而共享線程可以被多個(gè)頁面訪問，只有當(dāng)所有關(guān)聯(lián)的頁面都關(guān)閉的時(shí)候才會(huì)結(jié)束。相對(duì)專用線程，共享線程稍微復(fù)雜些。

檢測瀏覽器對(duì)Web Worker的支

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

創(chuàng)建Web Worker對(duì)象及文件：

下面估計(jì)是最簡單的入門級(jí)別的JS多線程Demo：

這里寫圖片描述

創(chuàng)建線程

var worker = new Worker(url);//url為需要在線程中執(zhí)行的JavaScript文件名及對(duì)應(yīng)的路徑

線程通信

在主線程與子線程間進(jìn)行通信，使用的是線程對(duì)象的postMessage和onmessage方法。不管是誰向誰發(fā)送數(shù)據(jù)，發(fā)送方使用的都是postMessage方法，接收方都是使用的onmessage方法接收數(shù)據(jù)。postMessage和onmessage都只有一個(gè)參數(shù)，假定onmessage的參數(shù)為event，則通過event.data獲取收到的數(shù)據(jù)。

銷毀線程

在線程外部，使用線程實(shí)例的terminate方法銷毀線程 在線程內(nèi)部，使用close方法，線程自己銷毀自己

處理錯(cuò)誤

當(dāng)線程發(fā)生錯(cuò)誤的時(shí)候，它的onerror事件回調(diào)會(huì)被調(diào)用。

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

發(fā)送JSON數(shù)據(jù)

復(fù)雜的數(shù)據(jù)就用JSON傳送吧！

Web Worker中使用importScripts加載外部JS

在HTML頁面中，使用 <script>

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

在Web Worker中要注意！

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

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

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方法解決資源預(yù)加載的問題（瀏覽器預(yù)先加載資源，而不會(huì)對(duì)資源進(jìn)行解析和執(zhí)行），道理也很簡單。
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>

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

html5中的DOM編程的實(shí)現(xiàn)步驟

用h5做出微信的支付過程的實(shí)現(xiàn)步驟

用H5做有特效的下拉框

以上就是H5的多線程如何實(shí)現(xiàn)Web Worker的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！