web worker 小白攻略！！！

web worker 是一種運行在後臺的 javascript 語言，不影響頁面性能；

不支持window 和 Dom 操做

1. 首先建立worker 文件（主線程）

2. 在須要使用worker 的文件中即主線程中

① 引入，例如：

const worker = require('worker-loader!./worker.js');
複製代碼

② 實例化：

this._locationsWorker = new worker();
此時新建了一個子線程；
複製代碼

③ 發送數據：

this._locationsWorker.postMessage({locations:location});
複製代碼

3. 在 worker.js 中接收數據：（子線程）

（ 注意：web worker 是能夠發送網絡請求的；）

使用 onmessage 函數接收，代碼以下：
    let result = [];
    onmessage = function(e){
        let storeLocationUrl = e.data.storeInfoUrl;
        result.push(e.data.locations);
        if (result.length === 10 ){
            request.post(storeLocationUrl,{
                headers:{
                    projectId: '123456',
                    userId: e.data.user_id
                },
                json: result
            }).then((res) => {
                console.log(res);
            })
            result = [];
        }
        postMessage(result);
    }
複製代碼

此處的request 是在外部封裝的，無需在乎；

此處咱們能夠用 postMessage( result )將咱們的結果拋出，而後在對應的文件中使用 onmessage再次接受。 例如：

this._locationWorker.onmessage = ({ data }) => {
    console.log(data);  //此處的data就是咱們上面postmessage的數據。         
};
複製代碼

4.錯誤處理：

主線程能夠監聽子線程的是否發生錯誤，若是發生錯誤，會觸發主線程的 error 事件；

worker.onerror( function (event) {
console.log( event )
})
複製代碼

5.關閉子線程：

主線程中使用：worker.terminate ();
子線程中使用：self.close ();
此處的self 就是指子線程自己；
複製代碼

6.上述的例子時不用的頁面通訊，咱們在同頁面也能夠使用web worker:

①在頁面的script 中定義一個web worker:

<script id = ' worker '   type = ' app/worker '>
addEventListener('message', function(){
......
},false)
</script>
複製代碼

②咱們能夠直接讀取頁面中的script ，主要利用blob 接口，將代碼做爲二進制的對象讀取，而後將其轉化爲 url , 利用url 來建立worker 進行處理：

<script>
(function(){
var blob = new Blob([ document.querySelector(' #worker ').textContent ]);
var url = window.URL.createObjectURL( blob );
var worker = new Worker( url );	
worker.addEventListener('message',function(){
postMessage('....');
},false)
worker.postMessage( ' ' );
})();
</script>
複製代碼

以上的兩個script 就是將主線程和子線程放在同頁面中；

以上就是我目前瞭解的web worker的用法，至於service worker， 待我瞭解了在詳細闡述，那是一個很高大上的東西。 以上全部的代碼，都是我本身使用後，依照本身的看法寫出來的，有錯誤的地方請指出。

謝謝...