17370845950

Web Worker是HTML5的API，可在独立线程运行JS代码，避免阻塞主线程；通过postMessage通信，适用于计算密集任务如质数筛选。

JavaScript 是单线程语言，主线程负责页面渲染、事件处理和脚本执行。当遇到大量计算任务时，容易造成页面卡顿。为了解决这个问题，JavaScript 提供了 Web Workers，允许在后台线程中运行脚本，实现并行计算，避免阻塞用户界面。

什么是 Web Worker？

Web Worker 是 HTML5 提供的一个 API，它可以在与主线程隔离的独立线程中运行 JavaScript 代码。由于 Worker 线程不能直接操作 DOM 或访问 window 对象，因此它适用于纯计算任务，比如数据处理、图像分析、加密解密等。

Worker 通过消息机制与主线程通信：使用 postMessage() 发送数据，通过监听 onmessage 接收结果。这种设计保证了线程安全。

如何使用 Web Worker 实现并行计算？

下面是一个简单的例子，展示如何用 Worker 执行耗时计算（如计算质数）：

// worker.js
self.onmessage = function(e) {
  const num = e.data;
  let primes = [];
  for (let i = 2; i < num; i++) {
    if (isPrime(i)) primes.push(i);
  }
  self.postMessage(primes);
};

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

// main.js
const worker = new Worker('worker.js');

worker.onmessage = function(e) {
  console.log('找到质数:', e.data);
};

worker.postMessage(10000); // 向 Worker 发送数据

这样，复杂的计算就在后台完成，主线程依然保持流畅响应用户操作。

Worker 的类型与适用场景

• Dedicated Worker：专用于一个调用者（通常是创建它的脚本）。适合单一页面中的独立计算任务。
• Shared Worker：可被多个脚本（如同源的不同页面或 iframe）共享。适用于跨上下文的数据共享计算。
• Service Worker：主要用于网络代理、缓存控制，不直接用于并行计算。

对于大多数并行计算需求，Dedicated Worker 已足够。

注意事项与限制

使用 Web Worker 时需注意以下几点：

• Worker 中无法访问 DOM、window、document 等对象。
• 传递给 Worker 的数据是通过结构化克隆算法复制的，不是共享内存。大数据量传输会有性能开销。
• 可通过 Transferable Objects（如 ArrayBuffer）实现零拷贝传输，提升效率。
• 长时间运行的 Worker 应手动终止（worker.terminate()），避免资源浪费。

基本上就这些。Web Worker 让 JavaScript 能够突破单线程限制，合理使用可以显著提升应用性能，特别是在处理密集型计算时。不复杂但容易忽略。