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);
    }
}