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