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， 待我了解了在详细阐述，那是一个很高大上的东西。 以上全部的代码，都是我本身使用后，依照本身的看法写出来的，有错误的地方请指出。

谢谢...