HTML5中Web Worker指的是什么

這篇文章將為大家詳細(xì)講解有關(guān)HTML5中Web Worker指的是什么，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

瀏覽器中的Web Worker

背景介紹

我們都知道JavaScript這個(gè)語(yǔ)言在執(zhí)行的時(shí)候是采用單線(xiàn)程進(jìn)行執(zhí)行的，也就是說(shuō)在同一時(shí)間只能做一件事，這也和這門(mén)語(yǔ)言有很大的關(guān)系，采用同步執(zhí)行的方式進(jìn)行運(yùn)行，如果出現(xiàn)阻塞，那么后面的代碼將不會(huì)執(zhí)行，HTML5則提出了web Worker標(biāo)準(zhǔn)，表示JavaScript允許有多個(gè)線(xiàn)程，但是子線(xiàn)程完全受主線(xiàn)程的控制，子線(xiàn)程不能操作DOM，只有主線(xiàn)程可以操作DOM，所以以主線(xiàn)程為主的單線(xiàn)程執(zhí)行原理成了JavaScript這門(mén)語(yǔ)言的核心。

進(jìn)程與線(xiàn)程的區(qū)別

根本區(qū)別：進(jìn)程是操作系統(tǒng)資源分配的基本單位，而線(xiàn)程是任務(wù)調(diào)度和執(zhí)行的基本單位。
 在操作系統(tǒng)中能同時(shí)運(yùn)行多個(gè)進(jìn)程（程序）；而在同一個(gè)進(jìn)程（程序）中有多個(gè)線(xiàn)程同時(shí)執(zhí)行。

兼容性

web worker是什么？

簡(jiǎn)單來(lái)說(shuō)，其實(shí)就是在Javascript單線(xiàn)程執(zhí)行的基礎(chǔ)上，開(kāi)啟一個(gè)子線(xiàn)程，進(jìn)行程序處理，而不影響主線(xiàn)程的執(zhí)行，當(dāng)子線(xiàn)程執(zhí)行完畢之后再回到主線(xiàn)程上，在這個(gè)過(guò)程中并不影響主線(xiàn)程的執(zhí)行過(guò)程。

舉個(gè)栗子

傳統(tǒng)情況下，執(zhí)行下面的代碼后，整個(gè)頁(yè)面都會(huì)被凍結(jié)，由于javascript是單線(xiàn)程處理，如下代碼已經(jīng)完全組塞了后續(xù)的執(zhí)行

while(1){}

如果換一種方式，我們通過(guò)開(kāi)啟一個(gè)新的線(xiàn)程來(lái)執(zhí)行這段代碼，將他放在一個(gè)單獨(dú)的worker.js文件中,在主線(xiàn)程執(zhí)行以下代碼，則可以避免這種情況。

var worker = new Worker("worker.js")

Web Worker的用法

判斷當(dāng)前瀏覽器是否支持web worker

if (typeof (Worker) != "undefined") { //瀏覽器支持web worker  
    if (typeof (w) == "undefined") { //w是未定義的,還沒(méi)有開(kāi)始計(jì)數(shù)        
        w = new Worker("webworker.js"); //創(chuàng)建一個(gè)Worker對(duì)象,利用Worker的構(gòu)造函數(shù)  
    }
    //onmessage是Worker對(duì)象的properties  
    w.onmessage = function (event) { //事件處理函數(shù),用來(lái)處理后端的web worker傳遞過(guò)來(lái)的消息  
        // do something
    };
} 
else { // 瀏覽器不支持web worker
    // do something
}

API

①創(chuàng)建新的Worker

var worker = new Worker("worker.js")

②傳遞參數(shù)

worker.postMessage()

③接收消息

worker.onMessage = function(msg){}

④異常處理

worker.onerror = function(err){}

⑤結(jié)束worker

worker.terminate()

⑥載入工具類(lèi)函數(shù)

importScripts()

Worker作用域

當(dāng)我們創(chuàng)建一個(gè)新的worker時(shí)，該代碼會(huì)運(yùn)行在一個(gè)全新的javascript的環(huán)境中（WorkerGlobalScope）運(yùn)行,是完全和創(chuàng)建worker的腳本隔離，這時(shí)我們可以吧創(chuàng)建新worker的腳本叫做主線(xiàn)程，而被創(chuàng)建的新的worker叫做子線(xiàn)程。
  WorkerGlobalScope是worker的全局對(duì)象，所以它包含所有核心javascript全局對(duì)象擁有的屬性如JSON等，window的一些屬性，也擁有類(lèi)似于XMLHttpRequest()等。
  但是我們所開(kāi)啟的新的worker也就是子線(xiàn)程，并不支持操作頁(yè)面的DOM。

線(xiàn)程間的通訊是傳值而不是傳地址

主線(xiàn)程與子線(xiàn)程數(shù)據(jù)通信方式有多種，通信內(nèi)容，可以是文本，也可以是對(duì)象。需要注意的是，這種通信是拷貝關(guān)系，即是傳值而不是地址，子線(xiàn)程對(duì)通信內(nèi)容的修改，不會(huì)影響到主線(xiàn)程。事實(shí)上，瀏覽器內(nèi)部的運(yùn)行機(jī)制是，先將通信內(nèi)容串行化，然后把串行化后的字符串發(fā)給子線(xiàn)程，后者再將它還原。

JavaScript中的數(shù)據(jù)類(lèi)型存放原理以及傳遞規(guī)則

共享線(xiàn)程（SharedWorker）

共享線(xiàn)程是為了避免線(xiàn)程的重復(fù)創(chuàng)建和銷(xiāo)毀過(guò)程，降低了系統(tǒng)性能的消耗，
  共享線(xiàn)程SharedWorker可以同時(shí)有多個(gè)頁(yè)面的線(xiàn)程鏈接。
  使用SharedWorker創(chuàng)建共享線(xiàn)程，也需要提供一個(gè)javascript腳本文件的URL地址或Blob,該腳本文件中包含了我們?cè)诰€(xiàn)程中需要執(zhí)行的代碼，如下：

var worker = new SharedWorker("sharedworker.js");

共享線(xiàn)程也使用了message事件監(jiān)聽(tīng)線(xiàn)程消息，但使用SharedWorker對(duì)象的port屬性與線(xiàn)程通信如下:

worker.port.onmessage = function(msg){};

同時(shí)我們也可以使用SharedWorker對(duì)象的port屬性向共享線(xiàn)程發(fā)送消息如下：

worker.port.postMessage(msg);

運(yùn)行原理

生命周期

①當(dāng)一個(gè)web worker的文檔列表不為空的時(shí)候，這個(gè)web worker會(huì)被稱(chēng)之為許可線(xiàn)程。
②當(dāng)一個(gè)web worker的文檔列表中的任何一個(gè)對(duì)象都是處于完全活動(dòng)狀態(tài)的時(shí)候，這個(gè)web worker會(huì)被稱(chēng)之為需要激活線(xiàn)程。
③當(dāng)一個(gè)web worker是許可線(xiàn)程并且擁有計(jì)數(shù)器或者擁有數(shù)據(jù)庫(kù)事務(wù)或者擁有網(wǎng)絡(luò)連接或者它的web worker列表不為空的時(shí)候，這個(gè)web worker會(huì)被稱(chēng)之為受保護(hù)的線(xiàn)程。
④當(dāng)一個(gè)web worker是一個(gè)非需要激活線(xiàn)程同時(shí)又是一個(gè)許可線(xiàn)程的時(shí)候，這個(gè)web worker會(huì)被稱(chēng)之為可掛起線(xiàn)程。

以webKit為例加載并執(zhí)行worker的過(guò)程

應(yīng)用

可以做什么：

1.可以加載一個(gè)JS進(jìn)行大量的復(fù)雜計(jì)算而不掛起主進(jìn)程，并通過(guò)postMessage，onmessage進(jìn)行通信
2.可以在worker中通過(guò)importScripts(url)加載另外的腳本文件
3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
4.可以使用XMLHttpRequest來(lái)發(fā)送請(qǐng)求
5.可以訪(fǎng)問(wèn)navigator的部分屬性

不可以做什么：

1.不能跨域加載JS
2.worker內(nèi)代碼不能訪(fǎng)問(wèn)DOM
3.各個(gè)瀏覽器對(duì)Worker的實(shí)現(xiàn)不大一致，例如FF里允許worker中創(chuàng)建新的worker,而Chrome中就不行
4.不是每個(gè)瀏覽器都支持這個(gè)新特性

關(guān)于HTML5中Web Worker指的是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。