web worker 的使用webworker的使用xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

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>
  <h1>Web Worker Example</h1>
  <button id="startWorker">Start Worker</button>
  <p id="result">Result will appear here.</p>
  <script>
    // 检查浏览器是否支持 Web Worker
    if (window.Worker) {
      // 创建一个 Web Worker 实例，加载 worker.js
      const worker = new Worker('worker.js');
      document.getElementById('startWorker').addEventListener('click', () => {
        // 向 worker 发送数据（计算斐波那契数列的第 40 项）
        worker.postMessage({ num: 40 });
      });
      // 监听 worker 发回的数据
      worker.onmessage = function (event) {
        // 更新页面显示计算结果
        document.getElementById('result').textContent = `Fibonacci result: ${event.data.result}`;
      };
      // 错误处理
      worker.onerror = function (error) {
        console.error('Worker error:', error);
      };
    } else {
      console.log('Web Worker not supported in your browser.');
    }
  </script>
</body>
</html>

worker.js

// worker.js
self.onmessage = function (event) {
  // 接收到主线程的消息，event.data 是传入的数据
  const { num } = event.data;
  // 执行一些计算，比如计算斐波那契数列
  const result = fibonacci(num);
  // 将结果发回主线程
  self.postMessage({ result });
};

// 一个简单的递归函数来计算斐波那契数列
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}