事件循环中的“并行”和“并发”有什么区别？

在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线程中执行任何计算密集型任务，而不会影响到主线程的用户界面响应。

核心特点：

1. 独立执行环境： 每个Worker都有自己的全局作用域（self或this），不能直接访问主线程的window对象或DOM。这种隔离是出于安全和避免竞态条件的考虑。
2. 消息传递通信： 主线程和Worker线程之间通过postMessage()方法发送消息，并通过onmessage事件监听消息。传递的数据会被序列化（结构化克隆算法），这意味着它们是值的拷贝，而不是引用。
3. 非阻塞： 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学习网公众号了解相关技术文章。