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