Web Worker 的使用```html Web Worker 工作原理主线程发送: worker.postMes

<!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>
  <script>
    let isOpneWork = false;
    function creatWork(self) {
      isOpneWork = true;
    }
    // ------------------------------------创建子线程 --------------------------------
    const data = `
          // 监听主线程传过来的信息
          self.onmessage = e => {
            console.log(e)
            // console.log('子线程', e.data)
          }
          setInterval(() => {
            self.postMessage(Date.now())
          }, 1000)
        `;
    const blob = new Blob([data]); // 把poorWorker.js的内容转成二进制
    const url = window.URL.createObjectURL(blob); // 把二进制转成一个本地链接

    // ------------------------------------创建工作线程 --------------------------------

    const worker = new Worker(url);

    // ------------------------------------创建工作线程 --------------------------------
    worker.postMessage('主线程 => 子线程下发指令');
    let sum = 0;
    worker.onmessage = (msg) => {
      console.log('子线程 => 主线程数据 ：', msg.data);
      sum++;
      if (sum > 10) {
        worker.terminate(); // 关闭工作线程
      }
    };
    worker.onerror = (e) => {
      console.log(e);
    };
  </script>

  <style>
    .root {
      display: flex;
      flex-direction: column;
      text-align: center;
    }
    .btn-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40px;
      font-weight: 700;
      height: 200px;
    }

    .wrap {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .main {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 500px;
      height: 600px;
      background-color: rgb(248, 220, 186);
      border-radius: 10px;
    }
    .jiantou {
      position: relative;
      top: 50px;
      clip-path: polygon(
        21% 37%,
        21% 45%,
        100% 44%,
        100% 49%,
        21% 50%,
        21% 58%,
        0 47%
      );
      height: 120px;
      width: 200px;
      background-image: linear-gradient(45deg, #8727ff, #9d44fd 50%, #ff9fe1);
      transform: rotate(-50deg);
      animation: hudahuda 1s infinite;
    }

    @keyframes hudahuda {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    .work {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 500px;
      height: 600px;
      border-radius: 10px;
      background-color: rgb(172, 194, 255);
    }
    .onmessage {
      width: 450px;
      height: 100px;
      margin-top: 100px;
      line-height: 50px;
      border-radius: 5px;
      background-color: rgb(202, 250, 236);
    }
    .postMessage {
      width: 450px;
      height: 50px;
      line-height: 50px;
      margin-top: 50px;
      border-radius: 5px;
      background-color: rgb(252, 243, 166);
    }
  </style>

  <body>
    <div class="root">
      <h3 class="btn-wrap">Web Worker 工作原理</h3>

      <div class="wrap">
        <div class="main">
          <h2>主线程</h2>
          <div class="postMessage">
            <strong>发送: </strong>
            worker.postMessage('主线程=>工作线程下发指令')
          </div>
          <div class="onmessage">
            <strong>监听: </strong> worker.onmessage = (msg) =>
            {主线程=>监听工作线程数据 msg.data };
          </div>
        </div>
        <div class="jiantou"></div>
        <div class="work">
          <h2>工作线程</h2>
          <div class="postMessage">
            <strong>发送: </strong
            >worker.postMessage('工作线程=>主线程下发指令')
          </div>
          <div class="onmessage">
            <strong>监听: </strong> worker.onmessage = (msg) =>
            {工作线程=>监听主线程数据: msg.data };
          </div>
        </div>
      </div>
    </div>
  </body>
</html>