共计 2095 个字符，预计需要花费 6 分钟才能阅读完成。

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

    webWorker.postMessage(arrayBuffer, [arrayBuffer]);

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

// 主进程起了一个 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)};

不能使用 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);
        }
    }

WebWorker进阶

WebWorker 与主线程之间的通信

执行同页面的 WebWorker

WebWorker 嵌套

Shared WebWorker（跨页面通信）

站内搜索