摘要：它們旨在除開(kāi)其他方面創(chuàng)建有效的離線體驗(yàn)，攔截網(wǎng)絡(luò)請(qǐng)求，以及根據(jù)網(wǎng)絡(luò)是否可用采取合適的行動(dòng)并更新駐留在服務(wù)器上的資源。他們還將允許訪問(wèn)推送通知和后臺(tái)同步。是一種僅適用于的。音頻使得在上下文中直接完成腳本化音頻處理成為可能。

Web Workers是JavaScript運(yùn)行在瀏覽器中的一種能力,它允許在主線程創(chuàng)建Worker線程,主線程執(zhí)行的同時(shí),Worker線程在后臺(tái)運(yùn)行,互不干擾,這并不是說(shuō)JavaScript本身具有多線程的能力,是js運(yùn)行在webkit瀏覽器中,瀏覽器為其啟動(dòng)了新的線程,從而實(shí)現(xiàn)多線程的功能.

Web Workers中主要的兩種線程為專用線程Dedicated Worker和共享線程 Shared Worker,專用線程供單頁(yè)面使用,即專用線程不能被多個(gè)不同的頁(yè)面使用,共享線程能被多個(gè)不同的頁(yè)面使用.

2.1.專用線程(Dedicated Worker)

2.1.1專用線程實(shí)例

在輸入框輸入一個(gè)數(shù),計(jì)算出從1到該數(shù)字的和

(1).主線程代碼

  
    
    
  
  
    

      
      計(jì)算
    
  
  

(2).Worker線程代碼(Worker線程代碼寫(xiě)在worker.js中)

onmessage = function(event) {
  console.log("worker event data", event.data);
  var value = event.data;
  var sum = 0;
  for (var i = 1; i < value; i++) {
    sum += i;
  }
  postMessage(sum);
}

(3).執(zhí)行結(jié)果:

2.1.2線程執(zhí)行深度解析
根據(jù)以上述實(shí)例說(shuō)明
(1).首先調(diào)用Worker的構(gòu)造函數(shù)新建一個(gè)worker,指定一個(gè)腳本URI去執(zhí)行worker線程
(2).通過(guò)postMessage發(fā)送給worker線程
(3).在worker線程中用onmessage監(jiān)聽(tīng)消息數(shù)據(jù),并接收封裝在event參數(shù)data屬性中的數(shù)據(jù)
(4).worker將處理過(guò)的數(shù)據(jù)再通過(guò)postMessage發(fā)送給主線程
(5).worker線程返回?cái)?shù)據(jù)后,執(zhí)行主線程的onmessage回調(diào)函數(shù),調(diào)用worker.terminate()終止線程執(zhí)行,當(dāng)worker線程執(zhí)行出錯(cuò)時(shí)會(huì)調(diào)用onerror回調(diào)函數(shù).

詳解:
代碼執(zhí)行到 var worker = new Worker("worker.js"),會(huì)在webkit內(nèi)核中構(gòu)造一個(gè)webCore::jsWorker對(duì)象,并根據(jù)腳本地址發(fā)起異步加載流程,此時(shí)主線程并不會(huì)阻塞,等待worker線程的執(zhí)行結(jié)果,而是會(huì)接著往下執(zhí)行.接著主線程執(zhí)行postMessage,這時(shí)worker線程還么有創(chuàng)建完成,通過(guò)input輸入框輸入的數(shù)據(jù)將放在消息隊(duì)列中等待,直到worker線程創(chuàng)建完畢;worker線程復(fù)制消息數(shù)據(jù)到workerRunLoop消息隊(duì)列中,woker線程處理消息數(shù)據(jù)后將數(shù)據(jù)通過(guò)自身的postMessage發(fā)送,主線程執(zhí)行worker.onmessage回調(diào)函數(shù),執(zhí)行完畢后關(guān)閉線程.如果主線程接著給worker線程發(fā)送數(shù)據(jù)消息,worker線程會(huì)直接將復(fù)制消息數(shù)據(jù)到WorkerRunLoop.如圖所示

2.1.3Transferrable objects可轉(zhuǎn)讓對(duì)象
主線程和子線程之間可以通過(guò)結(jié)構(gòu)化克隆算法(復(fù)制副本)的方式傳入傳出不同類(lèi)型數(shù)據(jù),比如File,Blob,ArrayBuffer和json對(duì)象,如果用postMessag傳出一個(gè)50MB的文件將會(huì)非常消耗性能,為了解決這個(gè)問(wèn)題,可以將主線程中的數(shù)據(jù)直接傳遞給worker線程這就是Transferrable objects.

// Transferable Objects 格式
worker.postMessage(arrayBuffer, [arrayBuffer]);

// 例子1
var ab = new ArrayBuffer(1);
worker.postMessage(ab, [ab]);
//例子2
var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
for (var i = 0; i < uInt8Array .length; ++i) {
    uInt8Array[i] = i;
}
worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);

2.1.4應(yīng)用場(chǎng)景

(1).預(yù)先緩存并抓取數(shù)據(jù)供后期使用
(2).分析音視頻數(shù)據(jù),canvas繪圖數(shù)據(jù)的運(yùn)算和圖形生成處理
(3).大量數(shù)據(jù)分析和計(jì)算處理
(4).拼寫(xiě)檢查
(5).代碼高亮處理或者其他一些頁(yè)面文字格式化處理

2.1.5總結(jié)
學(xué)習(xí)專用線程,其實(shí)它可以和生活中的例子相結(jié)合起來(lái),比如領(lǐng)導(dǎo)給員工分配任務(wù),讓A員工把產(chǎn)品的原型畫(huà)出來(lái)后交給B員工去實(shí)現(xiàn)(領(lǐng)導(dǎo)作為主線程),A員工在接收到任務(wù)message后開(kāi)始工作,工作的產(chǎn)出的原型就是postMessage要返回的數(shù)據(jù),B員工在沒(méi)拿到原型時(shí)還做的他之前的工作,收到A員工給的原型開(kāi)始實(shí)現(xiàn)原型,實(shí)現(xiàn)完成后將產(chǎn)出結(jié)果給領(lǐng)導(dǎo)演示.結(jié)合這個(gè)例子可以理解專用線程的大致流程.

2.1.6兼容性

2.2共享線程(Shared Worker)

2.2.1共享線程實(shí)例

兩個(gè)頁(yè)面分別給一個(gè)SharedWorker發(fā)送數(shù)據(jù)并接收同一個(gè)共享線程發(fā)送的數(shù)據(jù)

//A頁(yè)面js代碼
  var worker = new SharedWorker("./worker.js");
  var port = worker.port;
  console.log("test port", port);
  port.postMessage("test000");
  port.onmessage = function(event) {
    console.log("test receive data", event.data);
  }
//B頁(yè)面js代碼
  var worker = new SharedWorker("worker.js");
  var port = worker.port;
  console.log("worker1 port", port);
  port.postMessage("test111");
  port.onmessage = function(event) {
    console.log("test1 receive data", event.data);
  };
//worker.js(即SharedWorker)代碼
onconnect = function(event) {
  var port = event.ports[0];
  port.onmessage = function(e) {
    port.postMessage(e.data);
  }
}

執(zhí)行結(jié)果:

2.2.2應(yīng)用場(chǎng)景
共享線程主要用在同一個(gè)線程被多個(gè)頁(yè)面或線程使用,比如,抓取緩存數(shù)據(jù)多個(gè)頁(yè)面需要使用,在瀏覽器兼容的情況下可以使用ShareWorker.

2.2.3總結(jié)
在測(cè)試上述例子時(shí),用google瀏覽器測(cè)試,共享線程中的例子不執(zhí)行,希望能得到解答和幫助

2.2.4兼容性

3.1區(qū)別
(1)共享worker通信必須通過(guò)端口對(duì)象(一個(gè)確切的打開(kāi)的端口)供腳本與worker通信,而專用線程在設(shè)置onmessage消息處理函數(shù)時(shí)會(huì)隱式的打開(kāi)與主線程的端口連接.
3.2注意事項(xiàng)

(1).在寫(xiě)demo測(cè)試時(shí),Google瀏覽器直接打開(kāi)文件,會(huì)當(dāng)成是跨域問(wèn)題,報(bào)類(lèi)似如下錯(cuò)誤,啟用本地服務(wù)器測(cè)試就可以了，用Node啟用本地服務(wù)器,可以看我的另一個(gè)文章 https://segmentfault.com/a/11...

(2)分配給 Worker 線程運(yùn)行的腳本文件，必須與主線程的腳本文件同源。

(3)worker線程不能獲取DOM,window,document,parent對(duì)象,可以獲取navigator,Location,XMLHttpRequest對(duì)象,setInterval/setTimeout方法, Application Cache,可以通過(guò)importScripts()方法加載其他腳本,可以創(chuàng)建新的Web Worker。

4.1 ServiceWorkers （服務(wù)worker）

一般作為web應(yīng)用程序、瀏覽器和網(wǎng)絡(luò)（如果可用）之前的代理服務(wù)器。它們旨在（除開(kāi)其他方面）創(chuàng)建有效的離線體驗(yàn)，攔截網(wǎng)絡(luò)請(qǐng)求，以及根據(jù)網(wǎng)絡(luò)是否可用采取合適的行動(dòng)并更新駐留在服務(wù)器上的資源。他們還將允許訪問(wèn)推送通知和后臺(tái)同步API。

4.2 Chrome Workers

是一種僅適用于firefox的worker。如果您正在開(kāi)發(fā)附加組件，希望在擴(kuò)展程序中使用worker且有在你的worker中訪問(wèn) js-ctypes 的權(quán)限，你可以使用Chrome Workers。詳情請(qǐng)參閱ChromeWorker。

4.3 Audio Workers （音頻worker）

使得在web worker上下文中直接完成腳本化音頻處理成為可能。

望不對(duì)之處請(qǐng)指正!

主要參考文章:

1.http://www.alloyteam.com/2015...
2.https://developer.mozilla.org...
3.http://www.ruanyifeng.com/blo...