事件循环中的“并行”和“并发”有什么区别?
时间:2025-08-06 19:58:27 348浏览 收藏
在JavaScript的世界里,“并行”与“并发”是优化性能的关键概念,但常被混淆。本文深入剖析了二者的本质区别:并发是指在单线程环境下,通过事件循环机制实现任务间的快速切换,模拟出“同时”执行的效果,尤其适用于I/O密集型任务,如网络请求。而并行则是指在多核处理器下,多个任务真正地同时执行,需要借助Web Workers等技术,将耗时的CPU密集型任务从主线程中分离出来,避免阻塞主线程,提升用户体验。理解并发与并行的差异,有助于开发者针对不同类型的任务选择合适的优化策略,充分发挥JavaScript的性能潜力。
并发指单线程下任务交替执行,通过事件循环实现非阻塞调度;2. 并行指多核下任务真正同时执行,需Web Workers等机制脱离主线程;3. I/O密集型任务用并发(如Promise),CPU密集型任务用并行(如Web Workers)以优化性能,避免主线程阻塞。
事件循环中的“并行”和“并发”是两个经常被混淆的概念,但它们在本质上有着根本的区别。简单来说,并发(Concurrency)是指系统能够管理多个任务,让它们在时间上交替进行,给人一种同时执行的错觉,尤其是在等待外部操作(如网络请求)时,系统可以切换到处理其他任务。而并行(Parallelism)则是指多个任务在同一时间点上,真正地、物理地同时执行,这通常需要多个独立的处理器核心或计算单元来支撑。

解决方案
理解事件循环中的“并行”和“并发”,关键在于认识到JavaScript的主线程是单线程的。
并发(Concurrency) 在JavaScript的事件循环机制下,我们主要体验到的是并发。这意味着,尽管你的JavaScript代码在运行时只有一个执行线程,但它通过一种巧妙的调度机制,能够同时“处理”多个任务。当一个任务(比如一个网络请求或定时器)需要等待外部资源时,主线程不会傻傻地原地等待,而是会将这个任务挂起,转而去处理任务队列中的其他待执行任务。一旦外部资源准备就绪,对应的回调函数就会被放入任务队列,等待主线程空闲时被执行。

这种模式的精髓在于“非阻塞”和“任务切换”。它不是真正地同时执行,而是在极短的时间内快速切换上下文,让多个任务看起来像是同时在推进。这就像一个高效的厨师,他可能同时在烧水、切菜、炖肉,但他并不是所有事情都同时用手在做,而是在等待水开的时候去切菜,在炖肉的时候去准备下一道菜的配料。
并行(Parallelism) 真正的并行,意味着多个任务在物理上同时进行,每个任务都有自己的独立执行单元。在传统的桌面应用或服务器端,这通常通过多线程或多进程来实现。每个线程或进程可以运行在不同的CPU核心上,从而实现真正的同时计算。

对于JavaScript而言,其主线程本身是无法实现CPU密集型任务的并行的。如果你在主线程上执行一个非常耗时的计算,比如一个复杂的图像处理算法,它会“阻塞”主线程,导致页面卡顿、无响应,因为事件循环无法继续处理用户交互、网络回调等其他任务。
然而,这并不意味着JavaScript完全无法利用并行能力。现代浏览器和Node.js通过一些机制,如Web Workers,允许JavaScript创建新的线程来执行代码,从而实现一定程度的并行。但请注意,这些新的线程与主线程之间是独立的,它们不能直接访问DOM,只能通过消息传递进行通信。
为什么JavaScript的事件循环通常被认为是并发而非并行?
这主要是由JavaScript语言的设计哲学和其运行环境(浏览器或Node.js)的实现方式决定的。JavaScript的核心设计是单线程的,这意味着在任何给定的时间点,JavaScript引擎的主执行上下文只能处理一个任务。这种设计简化了编程模型,避免了多线程编程中常见的复杂性,比如死锁和竞态条件。
事件循环机制正是这种单线程并发模型的体现。它通过一个永不停止的循环,不断地从任务队列(包括宏任务队列如setTimeout
、setImmediate
、I/O回调,以及微任务队列如Promise.then
、MutationObserver
)中取出任务并执行。当主线程遇到一个异步操作(例如发起一个网络请求),它会把这个操作交给宿主环境(浏览器或Node.js的底层C++模块)去处理,然后立即返回,继续执行后续的JavaScript代码。等到异步操作完成,宿主环境会将对应的回调函数放入任务队列,等待主线程空闲时来“拾取”并执行。
所以,你看,即使你的浏览器同时在下载图片、播放动画、响应点击,这些操作的“完成通知”最终都会回到主线程,由事件循环来调度执行它们的JavaScript回调。图片下载本身可能是在另一个线程进行的(由浏览器底层实现),但图片下载完成后,更新DOM的JavaScript代码,依然是在主线程上按顺序执行的。这种“我正在等待你,但我不会闲着”的模式,就是典型的并发。
在实际开发中,理解并发与并行对性能优化有何指导意义?
深刻理解并发和并行的区别,对于编写高性能、响应迅速的JavaScript应用至关重要。在我看来,这是优化策略的基石。
首先,对于I/O密集型任务(比如网络请求、文件读写),JavaScript的事件循环机制是极其高效的。你无需担心它们会阻塞主线程,因为它们是异步的。你可以同时发起多个请求,主线程在等待响应的过程中可以继续处理其他任务,比如渲染UI或响应用户输入。这正是Node.js在处理高并发请求方面表现出色的原因之一。所以,对于这类任务,我们应该充分利用async/await
、Promise
等异步编程范式,让事件循环的并发能力发挥到极致。
其次,对于CPU密集型任务(比如复杂的数学计算、大量数据处理、图像处理),情况就完全不同了。如果这类任务直接在主线程上执行,哪怕只是一小段时间,也足以让整个页面卡死,用户体验直线下降。因为这些计算会长时间占用CPU,不给事件循环任何喘息的机会。在这种情况下,仅仅依靠并发是远远不够的,我们需要引入并行。
这就是Web Workers大显身手的地方。当你有一个耗时且不会操作DOM的计算任务时,把它放到一个Web Worker中去执行,它会在一个独立的线程中运行,完全不会影响主线程的响应性。计算完成后,Worker再通过postMessage
把结果传回主线程。这种分离计算和UI的策略,能够显著提升应用的流畅度和用户体验。
所以,优化策略的指导思想就是:I/O密集型任务拥抱并发,CPU密集型任务考虑并行。不要试图在主线程上硬抗那些会“烧CPU”的任务,那只会让你的用户抱怨连连。
Web Workers如何帮助JavaScript实现真正的并行计算?
Web Workers是浏览器提供的一个API,它允许JavaScript在后台线程中运行脚本,而不会阻塞主线程。这正是JavaScript实现真正并行计算的关键所在。
说白了,当你创建一个Web Worker时,浏览器会为你启动一个新的操作系统线程。这个新线程有它自己的JavaScript执行环境和事件循环,与主线程完全独立。这意味着,你可以在Worker线程中执行任何计算密集型任务,而不会影响到主线程的用户界面响应。
核心特点:
- 独立执行环境: 每个Worker都有自己的全局作用域(
self
或this
),不能直接访问主线程的window
对象或DOM。这种隔离是出于安全和避免竞态条件的考虑。 - 消息传递通信: 主线程和Worker线程之间通过
postMessage()
方法发送消息,并通过onmessage
事件监听消息。传递的数据会被序列化(结构化克隆算法),这意味着它们是值的拷贝,而不是引用。 - 非阻塞: Worker线程中的计算不会阻塞主线程,主线程可以继续处理用户交互和渲染任务。
一个简单的例子:
假设你有一个需要计算大量斐波那契数列的任务。
main.js (主线程)
// 创建一个新的Worker const myWorker = new Worker('worker.js'); // 监听Worker发送的消息 myWorker.onmessage = function(event) { console.log('主线程收到Worker的消息:', event.data); document.getElementById('result').textContent = '计算结果:' + event.data.result; }; // 监听Worker错误 myWorker.onerror = function(error) { console.error('Worker发生错误:', error); }; // 点击按钮触发计算 document.getElementById('startButton').addEventListener('click', () => { document.getElementById('result').textContent = '计算中...'; // 向Worker发送消息,开始计算 myWorker.postMessage({ number: 40 }); // 计算第40个斐波那契数 console.log('主线程已向Worker发送计算请求'); }); // 确保UI不会被阻塞 let count = 0; setInterval(() => { document.getElementById('counter').textContent = '主线程计数:' + count++; }, 100);
worker.js (Worker线程)
// 在Worker线程中监听主线程发送的消息 onmessage = function(event) { const num = event.data.number; console.log('Worker线程收到计算请求,计算斐波那契数:', num); // 模拟一个耗时的计算 function fibonacci(n) { if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); } const result = fibonacci(num); // 将计算结果发送回主线程 postMessage({ result: result }); console.log('Worker线程计算完成,结果已发送'); };
在这个例子中,fibonacci(40)
是一个相对耗时的操作。如果它在主线程执行,你的页面会卡顿几秒钟。但通过Web Worker,这个计算在后台线程中进行,主线程可以继续更新计数器(setInterval
),保持UI的响应性。这就是Web Workers为JavaScript带来的真正并行计算能力。它极大地扩展了JavaScript在浏览器端处理复杂任务的可能性。
文中关于的知识介绍,希望对你的学习有所帮助!若是受益匪浅,那就动动鼠标收藏这篇《事件循环中的“并行”和“并发”有什么区别?》文章吧,也可关注golang学习网公众号了解相关技术文章。
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
126 收藏
-
429 收藏
-
334 收藏
-
500 收藏
-
491 收藏
-
411 收藏
-
336 收藏
-
400 收藏
-
437 收藏
-
381 收藏
-
234 收藏
-
169 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 511次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 498次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 484次学习