淺談HTML5 Web Worker

瀏覽器中的Web Worker

背景介紹

咱們都知道JavaScript這個語言在執行的時候是採用單線程進行執行的，也就是說在同一時間只能作一件事，這也和這門語言有很大的關係，採用同步執行的方式進行運行，若是出現阻塞，那麼後面的代碼將不會執行，HTML5則提出了web Worker標準，表示JavaScript容許有多個線程，可是子線程徹底受主線程的控制，子線程不能操做DOM，只有主線程能夠操做DOM，因此以主線程爲主的單線程執行原理成了JavaScript這門語言的核心。

進程與線程的區別

根本區別：進程是操做系統資源分配的基本單位，而線程是任務調度和執行的基本單位。
在操做系統中能同時運行多個進程（程序）；而在同一個進程（程序）中有多個線程同時執行。

兼容性

web worker是什麼？

簡單來講，其實就是在Javascript單線程執行的基礎上，開啓一個子線程，進行程序處理，而不影響主線程的執行，當子線程執行完畢以後再回到主線程上，在這個過程當中並不影響主線程的執行過程。
舉個栗子

傳統狀況下，執行下面的代碼後，整個頁面都會被凍結，因爲javascript是單線程處理，以下代碼已經徹底組塞了後續的執行

while(1){}

若是換一種方式，咱們經過開啓一個新的線程來執行這段代碼，將他放在一個單獨的worker.js文件中,在主線程執行如下代碼，則能夠避免這種狀況。

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

Web Worker的用法

判斷當前瀏覽器是否支持web worker

if (typeof (Worker) != "undefined") { //瀏覽器支持web worker  
    if (typeof (w) == "undefined") { //w是未定義的,尚未開始計數        
        w = new Worker("webworker.js"); //建立一個Worker對象,利用Worker的構造函數  
    }
    //onmessage是Worker對象的properties  
    w.onmessage = function (event) { //事件處理函數,用來處理後端的web worker傳遞過來的消息  
        // do something
    };
} 
else { // 瀏覽器不支持web worker
    // do something
}

API

①建立新的Worker

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

②傳遞參數

worker.postMessage()

③接收消息

worker.onMessage = function(msg){}

④異常處理

worker.onerror = function(err){}

⑤結束worker

worker.terminate()

⑥載入工具類函數

importScripts()

Worker做用域

當咱們建立一個新的worker時，該代碼會運行在一個全新的javascript的環境中（WorkerGlobalScope）運行,是徹底和建立worker的腳本隔離，這時咱們能夠吧建立新worker的腳本叫作主線程，而被建立的新的worker叫作子線程。
WorkerGlobalScope是worker的全局對象，因此它包含全部核心javascript全局對象擁有的屬性如JSON等，window的一些屬性，也擁有相似於XMLHttpRequest()等。
可是咱們所開啓的新的worker也就是子線程，並不支持操做頁面的DOM。

線程間的通信是傳值而不是傳地址

主線程與子線程數據通訊方式有多種，通訊內容，能夠是文本，也能夠是對象。須要注意的是，這種通訊是拷貝關係，便是傳值而不是地址，子線程對通訊內容的修改，不會影響到主線程。事實上，瀏覽器內部的運行機制是，先將通訊內容串行化，而後把串行化後的字符串發給子線程，後者再將它還原。

JavaScript中的數據類型存放原理以及傳遞規則

共享線程（SharedWorker）

共享線程是爲了不線程的重複建立和銷燬過程，下降了系統性能的消耗，
共享線程SharedWorker能夠同時有多個頁面的線程連接。
使用SharedWorker建立共享線程，也須要提供一個javascript腳本文件的URL地址或Blob,該腳本文件中包含了咱們在線程中須要執行的代碼，以下：

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

共享線程也使用了message事件監聽線程消息，但使用SharedWorker對象的port屬性與線程通訊以下:

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

同時咱們也能夠使用SharedWorker對象的port屬性向共享線程發送消息以下：

worker.port.postMessage(msg);

運行原理

生命週期

①當一個web worker的文檔列表不爲空的時候，這個web worker會被稱之爲許可線程。
②當一個web worker的文檔列表中的任何一個對象都是處於徹底活動狀態的時候，這個web worker會被稱之爲須要激活線程。
③當一個web worker是許可線程而且擁有計數器或者擁有數據庫事務或者擁有網絡鏈接或者它的web worker列表不爲空的時候，這個web worker會被稱之爲受保護的線程。
④當一個web worker是一個非須要激活線程同時又是一個許可線程的時候，這個web worker會被稱之爲可掛起線程。

以webKit爲例加載並執行worker的過程

應用

能夠作什麼：

1.能夠加載一個JS進行大量的複雜計算而不掛起主進程，並經過postMessage，onmessage進行通訊
2.能夠在worker中經過importScripts(url)加載另外的腳本文件
3.能夠使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
4.能夠使用XMLHttpRequest來發送請求
5.能夠訪問navigator的部分屬性

不能夠作什麼：

1.不能跨域加載JS2.worker內代碼不能訪問DOM3.各個瀏覽器對Worker的實現不大一致，例如FF裏容許worker中建立新的worker,而Chrome中就不行4.不是每一個瀏覽器都支持這個新特性