PWA(Progressive Web App)入门系列：（五）Web Worker
前言
在說Service Worker前有必要說一下Web Worker，因為Service Worker本身就屬于Web Worker的延伸，大部分功能也是基于Web Worker進行的擴展。
背景
眾所周知，JavaScript引擎是以單線程調度的方式進行，我們無法同時運行多個JavaScript文件，這種情況下就會導致對硬件資源無法充分利用，并且當在進行一些高耗性能的操作時，會影響主線程的其他任務，造成任務阻塞及用戶體驗差等問題。
在這種劣勢情況下，到 2008 年 W3C 提出第一個 HTML5 草案開始，就在 HTML5 中提出了Web Worker的概念，并規范了Web Worker的三大特征：
- 能夠長時間運行
- 理想的啟動性能
- 理想的內存消耗
簡介
Web Worker 是HTML5標準的一部分，這一規范定義了一套 API。實現了 用Web Worker 來實現 JavaScript 的 “多線程” 技術，并發執行多個 JavaScript 腳本。
Web Worker 與傳統多線程
每個JavaScript腳本執行流都稱為一個線程，彼此之間互相獨立，并且有瀏覽器中的 JavaScript 引擎負責管理，當然這并不是說JavaScript支持多線程，雖然傳統JavaSript有多種方式實現了對多線程的模擬（例如：setinterval，setTimeout，以及一些異步的操作方法等），但是在本質上程序的運行仍然是由 JavaScript 引擎以單線程調度的方式運行的，而Web Worker的線程是依賴于瀏覽器（宿主環境）來實現的，從而實現了對瀏覽器端多線程編程的支持。
Web Worker 線程種類
Web Worker 有兩種不同線程類型，分別是：
- Dedicated Worker （專用線程）。只能被首次生成它的腳本使用
- Shared Worker （共享線程）。可以同時被多個腳本使用
通常來說的Web Worker指的就是Dedicated Worker，Service Worker也屬于其中，并且各大瀏覽器對其支持良好，而Shared Worker指的是SharedWorker，目前各大瀏覽器對其支持度較差。
這里主要對Dedicated Worker進行詳細說明，對于Shared Worker不再進行細說。
Worker模式
Worker線程執行流
創建 Web Worker
下面說一下如何創建一個Web Worker
語法：
new Worker(in DOMString aStringURL );使用上面的方式即可以創建一個Web Worker對象，它執行的是aStringURL中的腳本。目前大多數瀏覽器是支持data URI的aStringURL的，可以通過URL.createObjectURL(blob)創建。但需要注意的是腳本必須遵循同源策略。
下面創建一個Worker，Worker的執行腳本是workerfile.js，創建成功后，它會返回一個新的Worker對象賦值給前面聲明的workerObj變量
var workerObj = new Worker('./workerfile.js');這里需要注意， worker線程的創建的是異步的，主線程代碼不會阻塞在這里去等待worker線程去加載、執行相應的腳本文件，而是會立即向下執行后面代碼。
Web Worker實例方法
Worker的實例方法只有兩個：
- postMessage
- terminate
postMessage
主線程向生成的Worker線程發送數據的方法。
語法：
workerObj.postMessage(aMessage, transferList);- aMessage：向Worker線程發送的消息數據對象。它可以是任何類型的值或JavaScript對象。
- transferList：可選。Transferable類型的數組。主要用在 ArrayBuffer, MessagePort, ImageBitmap對象。
注意：
postMessage發送的aMessage參數，在傳遞通訊的時候會對數據進行克隆，為了防止多個線程間的數據同時修改的問題。實際上，瀏覽器內部的實現是，先將通信傳遞的數據串行化，隨后把串行化后的數據發給子線程，后者再將數據還原。
postMessage也可以以二進制的方式傳輸，例如 ArrayBuffer 、File、Blob、ImageBitmap等對象。但是往往傳輸的這些對象數據量都很大，前面說了傳輸數據會進行拷貝，如果傳一個100MB的數據，那么瀏覽器默認會再復制一份100MB的數據，導致一些不必要的資源消耗。為了防止這種問題，就可以使用上面說的第二個參數transferList來解決。
順道科普一下Transferable接口。這個接口代表一個能在不同可執行上下文中相互傳遞的對象，例如主線程和Worker線程。
var arrBuff = new ArrayBuffer(8); myWorker.postMessage(arrBuff, [arrBuff]);terminate
語法：
workerObj.terminate()用于立即終止worker對象的行為，如果worker正在運行著任務也會立即終止。
Web Worker實例屬性
Worker實例包含兩個屬性：
- onmessage：用來接收worker線程傳遞過來的數據事件。
- onerror：用來接收worker線程的錯誤信息。
onmessage
onmessage屬性表示一個EventHandler事件處理函數，當Worker子線程返回一條消息時被調用。
語法：
workerObj.onmessage = function(e) { ... }傳遞來的消息被封裝在事件的data屬性中。
workerObj.onmessage = function(e) {var result = e.data; }onerror
onerror屬性是EventListener 一個事件監聽函數，一旦有類型為 error 的 ErrorEvent 從 worker線程中冒泡出來時就會執行該函數。可以通過preventDefault()來取消冒泡。
主要用到的錯誤屬性有：
- message: 可讀的錯誤信息
- filename: 發生錯誤的腳本文件名稱
- lineno: 發生錯誤的腳本所在文件的行數
Web Worker文件方法
Worker線程對象抽象于DedicatedWorkerGlobalScope接口。此作用域下沒有window對象，需要用self來調用。
在發送數據和接收數據使用的方法和worker實例對象的一樣：
- postMessage
- onerror
這兩個方法就不說了，還有一個close方法說一下。
close
這個和terminate()有點類似。這個方法主要用來清除所有在WorkerGlobalScope事件環中的排隊任務，關閉特定作用域。
self.close()importScripts 導入腳本
WorkerGlobalScope 對象中可以使用importScripts()方法來進行對腳本文件和資源的引入。
但這個操作需要注意：
- 如果沒有給 importScripts 方法任何參數，那么立即返回，終止下面的步驟。
- 解析 importScripts 方法的每一個參數。
- 如果有任何失敗或者錯誤，拋出 SYNTAX_ERR 異常。
- 嘗試從用戶提供的 URL 資源位置處獲取腳本資源。
- 對于 importScripts 方法的每一個參數，按照用戶的提供順序，獲取腳本資源后繼續進行其它操作。
Worker線程聲明周期
worker線程間的數據傳遞必須依賴于瀏覽器的context環境，通過MessagePort進行傳遞數據，所以每個worker線程的全局作用域都會有端口列表，并且會在WorkerGlobalScope中生成一個worker線程的線程列表，在初始化時為空。當worker線程創建時會被填充進去，當worker線程終止時會從這個列表刪除。
worker線程中可調用的對象
在worker線程中，可以獲得下列對象：
- navigator
- location
- XMLHttpRequest
- setTimeout/setInterval
- Application Cache
- fetch
- atob/btoa
等等。
實例
下面寫一個使用的小例子
html文件：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body> <button id="btn">發送</button> <script>var worker = new Worker('./worker.js')btn.onclick = function(){worker.postMessage({a:1,b:2,c:3})}worker.onmessage = function(e){console.log('index-msg:', e)}worker.onerror = function(e) {console.log('index-err', e)e.preventDefault()} </script> </body> </html>worker.js文件
self.onmessage = function(e) {console.log('worker in:', e)self.postMessage('get postMessage!') }兼容性
還是有必要列一下Worker目前在瀏覽器上的兼容性：
可以看到支持的非常不錯。
總結
可以看到Web Worker的出現使得在 Web 進行多線程編程成為可能，對于高消耗、耗時長的操作可以放到woker里面去進行。
所以可以在以下應用場景使用：
- 使用專用線程進行數學運算
- 圖像處理
- 大量數據的檢索
- 背景數據分析
等。
博客名稱：王樂平博客
CSDN博客地址：http://blog.csdn.net/lecepin
本作品采用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。總結
以上是生活随笔為你收集整理的PWA(Progressive Web App)入门系列：（五）Web Worker的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java代码总结【1】_查询手机号码归属
- 下一篇： 如何在Word里打出带圈的数字？