javascript webworker工作者线程

浏览器线程分为5个
GUI渲染线程
js引擎线程
事件触发线程
定时器触发线程
异步http请求线程
GUI线程有渲染 会等待js线程空闲时才会执行
js线程如果需要处理大量数据 会阻塞GUI 使用webworker js线程向浏览器申请开启子线程
加载js
只能与父页面同源加载。从其他源加载会出现错误

 const worker = new  Worker("/js/worker1.js");
           worker.onmessage = e =>{
             console.log(e.data);
           }

           worker.onerror = e => {
             console.log(e); // a is undefined
           }
           console.log(worker)

           // onmessageerror 监听发送的数据不能被反序列化错误
           // 发送数据事件
           worker.postMessage({key:"value"});

           立即终止worker线程中全部操作
           worker.terminate();

//worker1.js
console.log("woker1 start")
self.onmessage = e =>{
    console.log(e.data);
    console.log(e)
    self.postMessage("Polo")
}
//结束关闭线程
self.close();

主线程与子线程之间通信依靠 监听message事件 和postMessage()方法传递数据 除symbol类型之外 其他类型数据 都会由浏览器 结构化克隆算法 遍历该对象 在目标上下文生成它的一个副本
除此之外 还可以使用 MessageChannel 实现进程之间通信
postMessage 为临时传输协议 Channel Messaging API 可以使两个上下文间明确建立通信渠道

//主线程
  const channel = new MessageChannel();
      const worker = new Worker("/js/worker1.js");
      
      //将messagePort 对象发送到工作者线程
      //工作者线程负责处理初始化信道
      worker.postMessage(null,[channel.port1]);

      channel.port2.onmessage = ({data})=>{
        console.log(data,"main线程");
      }

      channel.port2.postMessage(5);

//worker线程
let messagePort = null;
self.onmessage = ({data,ports}) =>{
    console.log(data);
    console.log(ports)
    //只设置一次端口
    if(!messagePort){
        //初始化消息发送端口
        messagePort = ports[0];
        self.onmessage = null;
        messagePort.onmessage = ({data})=>{
            console.log("worker线程")
            messagePort.postMessage("worker!!!!!");
        }
    }
}

//结束关闭线程
// self.close();

使用BroadcastChannel
同源脚本通过BroadcastChannel互相之间发送接收消息。这种信道类型设置比较简单，不需要像MessageChannel那样转移乱糟糟的端口

//main
 const channel = new BroadcastChannel("worker_channel");
      const worker = new Worker("/js/worker1.js");
      
      channel.onmessage = ({data})=>{
        console.log(data,"main");
      }

      setTimeout(()=>{
          channel.postMessage("foo");
      },1500)

//worker
const channel = new BroadcastChannel("worker_channel");

channel.onmessage = ({data})=>{
    console.log(data,"workers");
    channel.postMessage("bar")
  }