前端性能优化new Worker实战

1.创建一个**.js文件，写入需要很长时间执行的子线程程序

console.log(this.name); // work中第二个参数option对象的name属性
function sleep(wait = 1000) {
   const now = Date.now();
   while(Date.now() - now < wait) {
      // 事件一直在执行，放在主线程中会影响页面渲染功能的任务
   }
}

this.onmessage = ({data}) => {
    console.log(data); // 主线程传递过来的数据
    sleep(); // 执行阻塞事件
    this.postMessage(***); // 子线程传递给主线程的数据     
}

2. 在主线程中构建new Worker并且进行操作

const worker = new Worker(url, option);
// url参数是子线程js文件地址，必须是同源的，是必须的
// option是可选参数，有name等属性，主要用于调试
worker.postMessage(***); // 传递给子线程的数据,主子线程开始标志
worker.onerror = e => {
    // 连接失败时所要执行的特殊情况
}
worker.onmessage = ({data}) => {
    // 子线程传递的数据data
}