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

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

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

2.1.專用線程(Dedicated Worker)

2.1.1專用線程實例

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

(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).執行結果:

2.1.2線程執行深度解析
根據以上述實例說明
(1).首先調用Worker的構造函數新建一個worker,指定一個腳本URI去執行worker線程
(2).通過postMessage發送給worker線程
(3).在worker線程中用onmessage監聽消息數據,并接收封裝在event參數data屬性中的數據
(4).worker將處理過的數據再通過postMessage發送給主線程
(5).worker線程返回數據后,執行主線程的onmessage回調函數,調用worker.terminate()終止線程執行,當worker線程執行出錯時會調用onerror回調函數.

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

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

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

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

2.1.6兼容性

2.2共享線程(Shared Worker)

2.2.1共享線程實例

兩個頁面分別給一個SharedWorker發送數據并接收同一個共享線程發送的數據

//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);
  }
}

執行結果:

2.2.2應用場景
共享線程主要用在同一個線程被多個頁面或線程使用,比如,抓取緩存數據多個頁面需要使用,在瀏覽器兼容的情況下可以使用ShareWorker.

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

2.2.4兼容性

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

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

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

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

4.1 ServiceWorkers （服務worker）

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

4.2 Chrome Workers

是一種僅適用于firefox的worker。如果您正在開發附加組件，希望在擴展程序中使用worker且有在你的worker中訪問 js-ctypes 的權限，你可以使用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...