webWorker多线程原理

worker多线程是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能
一、多线程的原理：在火车站买票，如果只有一个售票窗口，很多人同时买票，这时就非常拥堵，耗时比较长，而且可能会发生安全事故，那么如果新开多个售票窗口，就能起到分流的效果，很快能买到票，不会发生异常情况
二、用法：
1.点击按钮创建多线程对象
2.发送数据
3.把比较复杂的运算放到多线程里面计算，然后把计算完的结果发送到前端页面
三、具体流程：

//a)前端页面
document.onclick = function(){
  console.time(1);
  let w = new Worker("worker.js"); //创建对象
  w.postMessage(5000);  //发送到work.js文件里面
  w.onmessage = function(e){
    box.innerHTML = e.data;  //e.data是work.js计算完成的结果
  }
  console.timeEnd(1);
}

//b)多线程处理页面work.js
importScripts("其它work.js文件");
self.onmessage = function(e){
  //要大量的计算，最好放在多线程里面，self指向全局的worker对象
  let str = "";
  for(let i = 0; i<e.data; i++){
    str += String.fromCharCode(i);
  }
  self.postMessage(str);
}

对比不开多线程的时间

document.onclick = function(){
  //根据ASCII码生成大量的字符串
  console.time(1)
  let str = "";
  let num = 50000;
  for(let i=0; i<num; i++){
    str +=String.fromCharCode(i);
  }
  box.innerHTML = str;
  console.timeEnd(1);
}