WebWorker（js中的多线程）单线程：同一时间只能干一件事情多线程：同一时间可以干多件事情。 WebWorker

单线程：同一时间只能干一件事情

多线程：同一时间可以干多件事情

WebWorker是为了JavaScript创造多线程环境，允许主线程创建Worker线程，将一些任务分配给后者运行。在主线程运行的同时，Worker线程在后台运行，两者互不干扰。若存在大量运算时，可以把运算任务交给Worker线程，当Woker线程计算完成了，再把结果返回给js主线程，从而减少阻塞时间，也提高了运行效率，页面流畅度和用户体验效果也提高了。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    var worker = new Worker("./work.js")
    worker.onmessage = function (e) {
      console.log(e.data)
    }
  </script>
</body>
</html>

setTimeout(()=>{
  console.log("test worker")
},2000)
self.postMessage("work")

接收

// 方法1：
worker.onmessage = function (e) {
      console.log(e.data)
}

// 方法2：
worker.addEventListener('message', e => {
      console.log(e.data)
});

终止worker,调用terminate()方法

方法1：

// 写在index.html中
worker.terminate()

方法2：

// 可以在worker.js中直接调用close方法
self.close();

处理错误：

当worker出现运行中错误时

worker.onerror = function (err) {
      console.log(err)
}
worker.onmessageerror = function (err) {
      console.log(err)
}
worker.addEventListener('error', err => {
      console.log(err.message);
});
worker.addEventListener('messageerror', err => {
      console.log(err.message)
});

webWorker的数据传递

主线程和Worker有三种传递数据的方式，structedClone(结构化克隆算法)、Transferable object(可转移对象)、sharedArrayBuffer(共享内存)，都是通过postMessage()发送数据，通过监听message事件接收消息。