【H5】 多线程worker

【H5】 多线程worker:

实例化多线程：worker.js执行多线程的js文件

const w = new Worker("./worker.js");

利用//postMessage传输数据 //结果返回给主线程

w.postMessage( 50000 )

利用onmessage = function(){} 监听接收信息 得出运行结果 运行结果在e中

w.onmessage = function(e){}

没有开启多线程时：

<div id="box"></div>
  <script>
    document.onclick = function () {
      console.time(1) //计算时间开始
      let str = ""
      for (let i = 0; i < 50000; i++) {
        str += String.fromCharCode(i); //字符串fromCharCode方法获取字符
      }
      box.innerText = str;
      //计算时间结束 需要时间7s
      console.timeEnd(1)
    }
  </script>

使用多线程后：

worker.js内代码：

self.onmessage = function(e){
    //e.data传过来的参数
    let str = ""
    for( let i = 0;i<e.data;i++ ){
        str += String.fromCharCode(i); 	//字符串fromCharCode方法获取字符
    }
    self.postMessage( str );	//结果返回给主线程
}

worker.html内代码：

<div id="box"></div>
  <script>
   document.onclick = function(e){
     console.time(1)
     //实例化多线程Worker
     const w = new Worker("worker.js");	//worker.js使用多线程的js文件
     w.postMessage( 50000 )	//传输数据给多线程
     w.onmessage = function(e){	//接收返回给主线程的数据
        box.innerText = e.data;
     }
     //执行时间变成0.5s  这就是多线程的优点
     console.timeEnd(1)
   }
  </script>