我們都知道客戶端JAVAScript有一個基本的特性就是單線程。這是有一定歷史原因的，暫且不深究。隨著web應用的越來越復雜，客戶端的js可能會承擔越來越繁重的計算任務，從而導致UI線程被阻塞無法及時響應用戶的操作。

worker的出現(xiàn)，就是來解放主線程的js的計算任務的，由于安全的考慮，worker也會受到一定的限制。

1. 基本知識

在Web Worker標準中，定義了解決客戶端JavaScript無法多線程的問題。

worker是指執(zhí)行代碼的并行線程。Web Workers處在一個自包含的執(zhí)行環(huán)境，無法訪問Window對象和Document對象，和主線程之間的通信也只能通過異步消息傳遞機制來實現(xiàn)。提供一種使用異步API的方式，同時運行書寫需要長時間運行的函數(shù)而不會帶來循環(huán)事件和導致瀏覽器崩潰的問題。Web Workers標準中，有兩部分組成Worker對象和WorkerGlobalScope全局對象。

2. Worker對象

使用構(gòu)造函數(shù)Worker()創(chuàng)建Worker對象

var loader = new Worker(url)url:可以采用相對路徑和絕對路徑，但是采用絕對路徑必須和包含該腳本的文檔是同源的。使用postMessage()傳遞參數(shù)給Worker傳遞給postMessage()方法的值hi賦值，最終的副本會通過message事件傳遞給Worker

loader.postMessage('file.txt');通過message事件來接收Work的響應消息

worker.onmessage = function(e){ var message = e.data; console.log('URL contents: ' + message);}使用terminate()終止Worker

worker.onmessage = function(e){ //接收處理Worker的響應消息 //終止worker worker.terminate();}

此外，Worker可以通過error事件來處理異常。

worker.onerror = function(e){ concole.log('Error at ' + e.filename + ':' + e.lineno + ':' + e.message);}

和所有事件目標一樣，Worker對象也定義了標準的addEventListener()和removeEventListener()

3. WorkerGlobalScope全局對象

在通過Worker()構(gòu)造函數(shù)創(chuàng)建一個新Worker的時候，指定了包含JavaScript代碼文件的URL。該代碼會運行在一個全新的JavaScript運行環(huán)境中，完全和創(chuàng)建Worker的腳本隔離開來。

WorkerGlobalScope全局對象表示了該新的運行環(huán)境，它是新創(chuàng)建的Worker的全局對象。

3.1 與外部Worker的通信

1. postMessage() & message事件

WorkerGlobalScope對象同樣有postMessage()方法和message事件，利用這兩者可以與外部Worker進行通信

//worker內(nèi)部onmessage = function(e){ postMessage(e.data);}

2. close()

同樣，Worker可以使用close()來關(guān)閉自己，但是要注意的是，Worker對象上沒有定義任何API用于檢測Worker是否已關(guān)閉。因此，如果一個Worker要使用close()方法將自己關(guān)閉，那么最好是先傳遞”關(guān)閉”的信息。

3. importScripts()

Worker內(nèi)部使用此方法來加載任何需要的庫代碼。而是此方法是一個同步的方法，它在直到所有的腳本都已經(jīng)載入并運行完成才會返回。

//在開始工作前，現(xiàn)在如需要的類、工具函數(shù)importScript('collections/Set.js','utils/base64.js');

3.2 WorkerGlobalScope的屬性

它擁有所有核心JavaScript全局對象擁有的屬性，同時，還擁有部分客戶端Window對象的一些屬性。

self：對全局對象自身的引用計數(shù)器方法：setTimeout()/clearTimeout()/setInterval()/clearInterval()location：只讀navigator常用的事件目標方法：addEventListener()和removeEventListener()onerror屬性

4. 應用場景：腳本化HTTP請求

WorkerGlobalScope對象好包含一些重要的構(gòu)造函數(shù)，其中就有XMLHttpRequest()，以便Worker可以通過它進行腳本化的HTTP請求。

在Worker中發(fā)起同步的XmlHttpRequest

//Worker內(nèi)部onmessage = function(e){ var urls = e.data; //要獲取的url var contents = []; //url指定的內(nèi)容 var i,len,url; for(i = 0, len = urls.length; i < len; i++){ var url = urls[i]; var xhr = new XMLHttpRequest(); xhr.open('GET',url,false);//false表示進行同步請求 xhr.send(); if(xhr.status !== 200){ throw Error(xhr.status + ' ' + xhr.statusText + ': ' + url); } contents.push(xhr.responseText); } //返回url的內(nèi)容 postMessage(contents);}