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

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

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

2.1.專用線程(Dedicated Worker)

2.1.1專用線程實例

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

(1).主線程代碼

  
    
    
  
  
    

      
      計算
    
  
  

(2).Worker線程代碼(Worker線程代碼寫在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ù)以上述實例說明
(1).首先調(diào)用Worker的構(gòu)造函數(shù)新建一個worker,指定一個腳本URI去執(zhí)行worker線程
(2).通過postMessage發(fā)送給worker線程
(3).在worker線程中用onmessage監(jiān)聽消息數(shù)據(jù),并接收封裝在event參數(shù)data屬性中的數(shù)據(jù)
(4).worker將處理過的數(shù)據(jù)再通過postMessage發(fā)送給主線程
(5).worker線程返回數(shù)據(jù)后,執(zhí)行主線程的onmessage回調(diào)函數(shù),調(diào)用worker.terminate()終止線程執(zhí)行,當(dāng)worker線程執(zhí)行出錯時會調(diào)用onerror回調(diào)函數(shù).

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

2.1.3Transferrable objects可轉(zhuǎn)讓對象
主線程和子線程之間可以通過結(jié)構(gòu)化克隆算法(復(fù)制副本)的方式傳入傳出不同類型數(shù)據(jù),比如File,Blob,ArrayBuffer和json對象,如果用postMessag傳出一個50MB的文件將會非常消耗性能,為了解決這個問題,可以將主線程中的數(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)用場景

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

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

2.1.6兼容性

2.2共享線程(Shared Worker)

2.2.1共享線程實例

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

//A頁面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頁面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)用場景
共享線程主要用在同一個線程被多個頁面或線程使用,比如,抓取緩存數(shù)據(jù)多個頁面需要使用,在瀏覽器兼容的情況下可以使用ShareWorker.

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

2.2.4兼容性

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

(1).在寫demo測試時,Google瀏覽器直接打開文件,會當(dāng)成是跨域問題,報類似如下錯誤,啟用本地服務(wù)器測試就可以了，用Node啟用本地服務(wù)器,可以看我的另一個文章 https://segmentfault.com/a/11...

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

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

4.1 ServiceWorkers （服務(wù)worker）

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

4.2 Chrome Workers

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

4.3 Audio Workers （音頻worker）

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

望不對之處請指正!

主要參考文章:

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