阅读 144

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

谢谢...