JavaScript并发模型_Worker多线程编程实践-js教程-PHP中文网

JavaScript并发模型_Worker多线程编程实践

狼影

发布： 2025-11-22 21:09:55

原创

134人浏览过

Web Worker 可解决 JavaScript 单线程计算阻塞问题，通过在后台线程执行耗时任务并借助 postMessage 与主线程通信，适用于图像处理、大数据运算等场景；需注意减少通信频率、避免传递复杂对象、及时终止线程以优化性能，还可结合 Transferable Objects 提升传输效率，使用 SharedWorker 支持多页面共享，配合 WebAssembly 增强计算能力，并通过 Worker 池复用实例降低开销，调试时可利用 console.log 和 onerror 在开发者工具中定位问题。

javascript并发模型_worker多线程编程实践

JavaScript 是单线程语言，但通过事件循环和任务队列实现了高效的异步处理能力。然而，面对大量计算密集型任务时，主线程容易被阻塞，导致页面卡顿。为解决这个问题，Web Worker 提供了多线程编程的支持，让开发者可以在后台线程中执行脚本，避免影响用户界面。

Worker 基本概念与使用方式

Web Worker 允许在后台线程中运行 JavaScript 代码，与主线程完全隔离。这意味着 Worker 不能直接操作 DOM 或访问 window 对象，但它可以通过 postMessage 和 onmessage 与主线程通信。

创建一个简单的 Worker 很简单：

新建一个 JS 文件（如 worker.js），编写要在线程中执行的逻辑
在主线程中通过 new Worker('worker.js') 实例化 Worker
使用 postMessage 发送数据，用 onmessage 接收返回结果

示例代码：

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

// main.js
const worker = new Worker('worker.js');
worker.postMessage('Hello Worker');
worker.onmessage = function(e) {
  console.log('Received:', e.data);
};

// worker.js
self.onmessage = function(e) {
  const result = expensiveCalculation(e.data);
  self.postMessage('Result: ' + result);
};

登录后复制