JavaScript Worker_javascript并行计算-js教程-PHP中文网

JavaScript Worker_javascript并行计算

夜晨

发布： 2025-12-02 16:24:07

原创

735人浏览过

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

javascript worker_javascript并行计算

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

什么是 Web Worker？

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

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

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

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

立即学习“Java免费学习笔记（深入）”；

工作易人才招聘系统金牌型

工作易人才招聘系统作为最受欢迎的.net开源人才系统平台，并获得了了国家《计算机软件著作权版权证书》。并努力为用户提供了各种功能。用户可以利用这些功能搭建自己的专业招聘网站。工作易人才招聘系统是基于Windows平台，采用微软.Net(Aspx)+SQLServer 2005为开发运行环境，语言天生运算速度是ASP的2-3倍，安全和稳定性更是asp所无法比拟和超越的。其安装简单方便，只需

查看详情

1. 创建 worker.js 文件：

// 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;
}

登录后复制

2. 在主线程中创建 Worker 并通信：

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

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

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

登录后复制

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