WebWorker进阶

WebWorker与主线程之间的通信

这篇文章主要分享介绍了WebWorker特殊应用场景, 扩展了WebWorker的能力, 为跨页面通信提供了另外一种思路。在上一篇文章里面也有了解到webworker与主线程之间的通信,使用的是一个PostMessage。在上一篇文章中,有个例子是,从主线程到子线程传了一个json,从子线程到主线程传了一个number,由此可见,Webworker与主线程通信之间的通信内容可以是:字符串、对象、二进制或者是任何JavaScript可以表示存储的内容,只要这个内容可以用JavaScript的变量来表示,那么这个内容就可以被PostMessage传输,然后这个传输就是拷贝关系。也就是说在子线程里面到主线程会完全拷贝一份一模一样的,之后再送给需要接收消息的另一方,这就是一个拷贝关系,这个关系主要是为了防止传输过程中出现的意外造成数据的不完整,然后在JavaScript中,一些参数的传递都是一个浅拷贝,浅拷贝违背了子线程和主线程只能通过PostMessage传递消息的原则。所以WebWorker与主线程通信之间的通信关系都是拷贝关系。但是我们需要考虑的一点是,拷贝数据量过大时,拷贝起来是比较消耗性能的,因此WebWorker有一个转移的方式,转移起来只能使用二进制,转移之后当前线程无论是从主到子还是从子到主,转移之后的二进制数据就没有操作权了,接收方才有操作权。

webWorker.postMessage(arrayBuffer, \[arrayBuffer\]);

执行同页面的WebWorker

JavaScript代码要在WebWorker里面执行的代码需要放在同一个文件里。

  • 未知的script 类型,代码不会执行
    <script id="samePageWorker" type="unknow">
        addEventListener('message', () => {
            postMessage('send message!');
        }, false);
    </script>
    
  • 二进制读取并开启新的WebWorker
    const blob = new Blob(\[document.getElementById('samePageWorker').text\]);
    //把读取文件的内容放到内存中,之后再返回一个内存地址
    const url = URL.createObjectURL(blob);
    /\* 获取保存在内存中的文件地址 */
    const webWorker = new Worker(url);
    ​
    webWorker.postMessage(123);
    

WebWorker嵌套

//主进程起了一个main.js的WebWorker,向它发送了一个Hello
const webWorker = new Worker('./main.js');
window.webWorker = webWorker;
webWorker.postMessage('Hello');
​
//子进程main.js又起了一个worker然后向下面这个子进程发送了一个message:word
this.addEventListener('message', event => {
    console.log('received index.html data', event.data);
}, false);
const webWorker = new Worker('./index.js');
webWorker.postMessage('Word');
​
//在index.js也就是最里层的WebWorker加了一个消息监听事件,接收到了下面这个数组
this.addEventListener('message', event => {
    console.log('received main data', event.data);
}, false)};

Shared WebWorker(跨页面通信)

不能使用console

const shareWorker = new SharedWorker('./main.js');
window.shareWorker = shareWorker;
shareWorker.port.start();
shareWorker.port.postMessage(1);
shareWorker.port.onmessage = event => {    
	console.log(event.data);
}


const shareWorker = new SharedWorker('./main.js');
shareWorker.port.postMessage(1);
shareWorker.port.onmessage = event => {    
	console.log(event.data);
};
shareWorker.port.start();
let temp = 1;

this.onconnect = event => {
    const port = event.ports[0];
    port.start();

    port.onmessage = e => {
        temp = temp + e.data;
        port.postMessage(temp);
    }
}

转载于:https://my.oschina.net/u/4144971/blog/3072070

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值