在这里的案例是我使用worker进行UI界面的改变众所周知,如果在JS代码在进行运算中去改变页面的UI显示的数据,只能等到JS代码计算完毕后才能进行更换UI界面,然而worker就是处理这种的,例如下面的demo,当我点击按钮会在js计算的过程中页面输出一个456,这里我判断的是索引为10的时候去改变UI,代表确实是在JS进程中了,当计算完毕后在控制台打印结果,正常情况下只能等结果打印出的瞬间才能更改UI数据,这里就能在不等计算结束直接渲染UI,好了,话不多说,直接看下面demo,运行demo即可

在一个html文件内

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Worker Example</title>
</head>
<body>
  <div id="output">123</div>
  <button onclick="startCalculation()">Start Calculation</button>

  <script>
    // 定义一个函数，用于启动计算
    function startCalculation() {
      // 创建一个新的 Worker 对象
      const worker = new Worker(URL.createObjectURL(new Blob([`(${workerCode.toString()})()`], {type: 'application/javascript'})));

      // 监听来自 Worker 的消息
      worker.onmessage = function(event) {
        // 当收到消息时，更新页面输出
        document.getElementById('output').innerText = event.data;
      };

      // 向 Worker 发送消息，开始计算
      worker.postMessage('start');
    }

    // 定义 Web Worker 内部的计算函数
    function workerCode() {
      // 监听来自主线程的消息
      onmessage = function(event) {
        if (event.data === 'start') {
          // 开始复杂的计算逻辑
          console.log('Starting complex calculation...')
          let result = 0
          for (let i = 0; i < 1000000000; i++) {
            if (i === 10) {
              // 当满足条件时，发送消息到主线程
              postMessage('456');
            }
            result += Math.sqrt(i)
          }
          console.log('Complex calculation result:', result)
        }
      };
    }
  </script>
</body>
</html>

分开html和js文件

html文件代码

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Render and Continue Calculation Example</title>
</head>

<body>
  <div id="output">123</div>
  <button onclick="startCalculation()">Start Calculation</button>

  <script>
    function startCalculation() {
      // 创建一个新的Web Worker
      const worker = new Worker('worker.js'); // 这里是引用的js路径

      // 接收来自Web Worker的消息
      worker.onmessage = function (e) {
        document.getElementById('output').innerText = e.data;
      };

      // 向Web Worker发送消息
      worker.postMessage('start');
    }
  </script>
</body>

</html>

worker.js代码

js 复制代码

// worker.js

// 监听来自主线程的消息
onmessage = function (e) {
  if (e.data === 'start') {
    console.log('Starting complex calculation...')
    let result = 0
    for (let i = 0; i < 1000000000; i++) {
      if (i === 10) {
        // 发送计算结果到主线程
        postMessage('456')
      }
      result += Math.sqrt(i)
    }
    console.log('Complex calculation result:', result)
  }
}

Html关于worker的使用

在一个html文件内

分开html和js文件

html文件代码

worker.js代码