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