webWorker

webworke

webWorker是h5新增api，该api不会影响浏览器展UI的主线程，而是重新开启一个线程。
在页面中

//  如何传入的是绝对URL，必须是符合通源策略
let webworker = new Worker("./main.js");
console.log(webworker);
//  发送消息给线程
webworker.postMessage('aaa');
//  接受线程消
webworker.onmessage = function(e){
  console.log(e.data);
}

WebworkerGlobalScope

webworker的一个新线程，全局对象为self，⚠️：只要message接收到消息，则该工作线程就不会退出。webworker中没有任何属性和方法能告诉我 们工作线程是否还在运行。

// 在worker中 self = this;
self.onmessage = function(e){
  console.log(e.data === "aaa");
  setTimeout(()=>{
    if(e.data === "aaa"){
      self.postMessage('我是self ')
    }
  },1000)
}

webworker中模块导入

由于在有webworker的时候还没有import的模块导入，所以 webworker有自己的模块导入importScript,这种导入模块是同步加载并且执行，如果默认出现错误，后续脚本就不会在加载或执行。

// webworker 中的模块导入
importScripts("./1")    //    有点怪怪的。～～导入的是整个文件

MessageChannel

messageChannel是信息管道对象。MessageChannel的onmessage回调属于宏任务
⚠️： 管道通讯需要使用管道的onmessage。

<script>
    let worker1 = new Worker("./main.js");
    let worker2 = new Worker("./1.js");
    console.log(worker1, worker2);
    //  创建一个信息通道
    let mc = new MessageChannel();
    //  port1   分配给worker1
        //    postMessage 参数二 传递所有权
    worker1.postMessage({ name: "port1", port: mc.port1 }, [mc.port1]);
    worker2.postMessage({ name: "port2", port: mc.port2 }, [mc.port2]);
</script>

main.js

//  暂停1000 后发送消息给port2
self.onmessage = (e) => {
  console.log(e.data);
  if (e.data.name === "port1") {
    const port1 = e.data.port;
    //    延时给port2发送消息。
    setTimeout(() => {
      console.log('12');
      port1.postMessage("我是port1，我发送了一个消息")
    }, 1000);
        //    接受port2发送过来的消息
    port1.onmessage = (e)=>{
      console.log(e.data);
    }
  }
}

1.js

//  port2   接受到port1的消息后 ，延迟反馈给port1
self.onmessage = (e) => {
    if (e.data.name === "port2") {
        const port2 = e.data.port;
        port2.onmessage = function (portEvent) {
           //    延时发送消息给port1
            if (portEvent.data) {
                setTimeout(() => {
                    port2.postMessage("我是port2，我发送了一个消息")
                }, 1000)
            }
        }
    }
}