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

web worker 小白攻略！！！

web worker 是一种运行在后台的 javascript 语言，不影响页面性能；

不支持window 和 Dom 操作