并发指单线程下任务交替执行，通过事件循环实现非阻塞调度；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 (主线程)
// 创建一个新的Workerconst 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在浏览器端处理复杂任务的可能性。
以上就是事件循环中的“并行”和“并发”有什么区别？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516720.html
微信扫一扫 
支付宝扫一扫 
