web worker 小白攻略！！！

Summer_xiazi發表於2018-06-01
Web

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， 待我瞭解了在詳細闡述，那是一個很高大上的東西。 以上所有的程式碼，都是我自己使用後，依照自己的見解寫出來的，有錯誤的地方請指出。

謝謝...

相關文章