发布于 由admin

JavaScript内核与高级编程之：`JavaScript`的`Web Worker`：如何利用它在后台线程执行耗时计算。

各位观众老爷们，晚上好！今儿咱们聊聊JavaScript里的劳模——Web Worker。 想象一下，你辛辛苦苦写了个网页，用户一点按钮，页面卡死了，鼠标转圈圈，用户恨不得砸电脑。这场景是不是很熟悉？ 这就是因为JavaScript是单线程的，啥都得排队，一个耗时的操作堵住了主线程，整个页面就歇菜了。

但是！Web Worker就是来拯救世界的。它让你可以在后台开个小弟（线程），专门干那些费时费力的活儿，主线程该干嘛干嘛，互不耽误。 这样，用户再点按钮，页面依然丝滑流畅，体验嗖嗖地上涨。

一、 Web Worker： 你的专属小弟

Web Worker本质上就是一个JavaScript脚本，它运行在与主线程分离的独立线程中。 这意味着它可以执行计算密集型任务，而不会阻塞用户界面。

Web Worker的特点：

特性 说明
独立线程 运行在独立的线程中，不影响主线程的性能。
消息传递 通过消息机制与主线程通信，避免直接访问共享内存带来的同步问题。
无权访问DOM 不能直接访问DOM元素，这意味着不能直接操作网页内容。
有限的API访问 只能访问JavaScript的部分API，例如setTimeout、XMLHttpRequest等，不能访问window、document等全局对象。
跨域限制 遵循同源策略，如果需要跨域加载worker脚本，需要服务端设置Access-Control-Allow-Origin。

二、 如何召唤你的小弟 (创建Web Worker)

创建Web Worker非常简单，就像雇佣一个员工一样：

// 在主线程中
const worker = new Worker('worker.js'); // worker.js是你的小弟的脚本文件

这行代码会在后台创建一个新的线程，并加载worker.js脚本。 接下来，你就可以通过消息机制与这个小弟进行沟通了。

三、 如何跟小弟沟通 (消息传递)

Web Worker和主线程之间通过postMessage()方法发送消息，并通过onmessage事件监听消息。 就像两个人用对讲机对话一样。

主线程发送消息给Worker：

// 主线程
worker.postMessage({ type: 'calculate', data: 1000000000 }); // 发送计算任务

Worker接收消息：

// worker.js
self.onmessage = function(event) {
  const data = event.data;
  if (data.type === 'calculate') {
    const result = calculatePrimeNumbers(data.data); // 执行耗时计算
    self.postMessage({ type: 'result', data: result }); // 将结果发送回主线程
  }
};

function calculatePrimeNumbers(limit) {
  let primes = [];
  for (let i = 2; i <= limit; i++) {
    if (isPrime(i)) {
      primes.push(i);
    }
  }
  return primes;
}

function isPrime(num) {
  for (let i = 2; i <= Math.sqrt(num); i++) {
    if (num % i === 0) {
      return false;
    }
  }
  return true;
}

Worker发送消息给主线程：

// worker.js
self.postMessage({ type: 'result', data: result });

主线程接收消息：

// 主线程
worker.onmessage = function(event) {
  const data = event.data;
  if (data.type === 'result') {
    const result = data.data;
    console.log('计算结果:', result);
    // 更新UI...
  }
};

四、 一个完整的例子：计算质数

咱们来个实战演练，用Web Worker计算一定范围内的质数。

1. HTML (index.html):

<!DOCTYPE html>
<html>
<head>
  <title>Web Worker Example</title>
</head>
<body>
  <h1>计算质数</h1>
  <input type="number" id="limit" value="100000">
  <button id="calculate">开始计算</button>
  <div id="result"></div>

  <script>
    const limitInput = document.getElementById('limit');
    const calculateButton = document.getElementById('calculate');
    const resultDiv = document.getElementById('result');
    let worker;

    calculateButton.addEventListener('click', function() {
      const limit = parseInt(limitInput.value);

      if (worker) {
        worker.terminate(); // 如果有正在运行的worker，先停止它
      }

      worker = new Worker('worker.js');

      worker.onmessage = function(event) {
        const data = event.data;
        if (data.type === 'result') {
          const result = data.data;
          resultDiv.textContent = '质数个数: ' + result.length;
        }
      };

      worker.onerror = function(error) {
        console.error('Worker 发生错误:', error);
      };

      worker.postMessage({ type: 'calculate', data: limit });
    });
  </script>
</body>
</html>

2. Worker脚本 (worker.js):

self.onmessage = function(event) {
  const data = event.data;
  if (data.type === 'calculate') {
    const limit = data.data;
    const startTime = performance.now();
    const result = calculatePrimeNumbers(limit);
    const endTime = performance.now();
    console.log(`计算耗时: ${endTime - startTime} ms`);  // 打印耗时

    self.postMessage({ type: 'result', data: result });
  }
};

function calculatePrimeNumbers(limit) {
  let primes = [];
  for (let i = 2; i <= limit; i++) {
    if (isPrime(i)) {
      primes.push(i);
    }
  }
  return primes;
}

function isPrime(num) {
  if (num <= 1) return false;
  if (num <= 3) return true;

  if (num % 2 === 0 || num % 3 === 0) return false;

  for (let i = 5; i * i <= num; i = i + 6) {
    if (num % i === 0 || num % (i + 2) === 0) return false;
  }

  return true;
}

把这两个文件放在同一个目录下，用浏览器打开index.html，你就能看到一个简单的计算质数的页面。 你可以尝试输入不同的数字，点击“开始计算”按钮，看看页面是否依然流畅。

五、 Web Worker 的一些高级用法

  • Dedicated Worker vs. Shared Worker:

    • Dedicated Worker: 只能被创建它的页面访问，就像你的私人助理。
    • Shared Worker: 可以被同一域名下的多个页面访问，就像一个共享的秘书。

    咱们上面演示的都是Dedicated Worker。 Shared Worker稍微复杂一点，需要通过port对象进行通信，可以参考MDN文档。

  • 导入脚本:

    Web Worker内部可以使用importScripts()函数导入其他的JavaScript脚本。 就像你的小弟需要学习更多的知识才能胜任工作一样。

    // worker.js
importScripts('utils.js', 'helper.js');

self.onmessage = function(event) {
  // ...
  const result = utils.doSomething(event.data); // 调用utils.js里的函数
  self.postMessage({ type: 'result', data: result });
};

  • 错误处理:

    Web Worker内部如果发生错误，会触发onerror事件。 记得要处理这些错误，避免程序崩溃。

    // worker.js
self.onerror = function(error) {
  console.error('Worker 发生错误:', error.message, error.filename, error.lineno);
};

六、 Web Worker 的适用场景

Web Worker非常适合以下场景：

  • 计算密集型任务: 例如图像处理、视频编码、复杂数学计算等。
  • 大数据处理: 例如分析大量数据、排序、过滤等。
  • 网络请求: 例如在后台批量下载文件、处理WebSocket消息等。
  • 代码高亮: 例如编辑器中的代码高亮功能，可以在后台线程进行。

七、 Web Worker 的注意事项

  • 通信开销: 主线程和Web Worker之间的通信需要序列化和反序列化数据，这会带来一定的开销。 因此，不要频繁地传递小数据，尽量批量处理数据。
  • 内存管理: Web Worker有自己的内存空间，需要注意内存泄漏的问题。 及时释放不再使用的对象。
  • 调试: 调试Web Worker的代码稍微麻烦一些。 现代浏览器都提供了Web Worker的调试工具，可以断点调试、查看console输出等。
  • 跨域问题: 如果你的worker脚本位于不同的域名下，需要配置CORS（跨域资源共享）。

八、 Web Worker 和其他并发方案的对比

技术 优点 缺点 适用场景
Web Worker 真正意义上的多线程，可以充分利用多核CPU，避免阻塞主线程。 通信开销较大，不能直接访问DOM，调试相对困难。 计算密集型任务、大数据处理、网络请求等，需要长时间运行且不影响UI响应的任务。
requestAnimationFrame 优化动画性能，使动画更流畅。 并非真正的并发，只是在浏览器每一帧渲染之前执行一些操作。 动画、UI更新等，对实时性要求较高的任务。
Promise.all 可以并发执行多个异步操作，简化异步代码。 并非真正的并发，只是将多个Promise放入事件循环队列中，仍然是单线程执行。 并发执行多个异步请求，例如同时获取多个API数据。

九、 总结

Web Worker是JavaScript中实现并发编程的重要手段，它可以让你充分利用多核CPU的优势，提高程序的性能和响应速度。 虽然使用Web Worker有一些限制和注意事项，但只要掌握了它的原理和用法，就能写出更加流畅、高效的Web应用。

好了，今天的Web Worker讲座就到这里。 记住，Web Worker是你的好帮手，让它帮你分担压力，你的网页才能更上一层楼！ 散会！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注