javascript的事件循环是其非阻塞i/o和并发模型的核心机制。1. javascript运行在单线程环境中，通过事件循环协调代码执行、处理异步操作；2. 异步任务如settimeout、fetch等被交给宿主环境处理，完成后回调放入消息队列；3. 事件循环持续检查调用栈是否为空，若空则从消息队列取出回调执行；4. 消息队列分为宏任务队列（如settimeout、i/o）和微任务队列（如promise回调），微任务优先级更高，会在宏任务之间被清空；5. javascript通过事件循环与宿主环境协作，实现“协作式并发”，虽非真正并行但能高效处理i/o密集型任务；6. 编写异步代码时需避免阻塞主线程、处理promise拒绝、理解任务执行顺序，并采用async/await提升可读性。
JavaScript的事件循环（Event Loop）是其实现非阻塞I/O和并发模型的基石。尽管JavaScript本身是单线程的，这意味着它一次只能执行一个任务，但通过事件循环机制，它能够有效地管理异步操作，避免长时间运行的任务阻塞主线程，从而给用户带来流畅的体验。它本质上是一个永不停歇的循环，不断检查调用栈是否为空，以及消息队列中是否有待处理的回调函数，如果有，就将其推到调用栈上执行。
解决方案
要深入理解JavaScript的并发模型，我们需要拆解几个核心概念，它们共同构筑了事件循环的运作方式。
首先，明确JavaScript的运行时环境（无论是浏览器还是Node.js）是单线程的。这意味着只有一个“主线程”负责执行所有代码。为了不让耗时的操作（比如网络请求、文件读写或定时器）阻塞这个唯一的线程，JavaScript引入了异步编程的概念。
立即学习“Java免费学习笔记（深入）”；
当一个异步操作被触发时，例如调用setTimeout、fetch或者文件I/O，JavaScript引擎并不会立即执行它，而是将其交给宿主环境（浏览器或Node.js的底层C++线程）去处理。这些宿主环境拥有自己的多线程能力，可以并行处理这些耗时任务。一旦异步操作完成，其对应的回调函数并不会立即执行，而是被放入一个“消息队列”（也称为“任务队列”或“回调队列”）中等待。
事件循环的核心职责，就是持续地监控两件事：
调用栈（Call Stack） 是否为空：调用栈是JavaScript执行代码的地方，遵循“后进先出”的原则。只有当调用栈为空时，主线程才算是“空闲”的。消息队列（Message Queue） 中是否有待处理的回调函数：这些回调函数是异步操作完成后的产物。
当调用栈为空时，事件循环就会从消息队列中取出一个回调函数，将其推到调用栈上执行。这个过程周而复始，形成了所谓的“事件循环”。这就像一个忙碌的咖啡师（主线程），虽然一次只能冲一杯咖啡，但他会把磨豆、烧水这些耗时的活交给机器（宿主环境），然后自己去招呼其他客人。等机器发出“叮”的一声，表示豆子磨好了，他再回来把磨好的豆子拿去冲泡。
值得一提的是，消息队列并非只有一个。在现代JavaScript中，我们通常区分两种类型的任务队列：
宏任务队列（Macrotask Queue）：包含如setTimeout、setInterval、I/O操作、UI渲染事件（在浏览器中）等的回调。微任务队列（Microtask Queue）：优先级更高，包含如Promise的回调（then、catch、finally）、queueMicrotask以及MutationObserver的回调。
事件循环在一个宏任务执行完毕后，会优先清空所有可用的微任务，然后再去处理下一个宏任务。这种机制确保了Promise链的执行顺序比setTimeout等更靠前。
为什么JavaScript是单线程的，但又能处理并发？
这确实是初学者最容易感到困惑的地方。JavaScript的单线程模型，从语言设计层面看，简化了编程复杂度，避免了多线程编程中常见的死锁和竞态条件问题。你不需要操心复杂的线程同步机制。
然而，单线程并不意味着它不能处理并发任务。这里的“并发”更多是一种“非阻塞”的体现，而非真正意义上的并行（Parallelism）。真正的并行是指多个任务在同一时刻物理上同时执行，这通常需要多核CPU和多线程支持。JavaScript的并发，是利用了事件循环和宿主环境（浏览器或Node.js）的底层多线程能力来实现的。
当你在JavaScript中发起一个fetch请求时，JavaScript引擎只是将这个任务“委托”给了浏览器或Node.js的底层网络模块（这些模块通常是C++编写的，并且是多线程的）。主线程立即解放出来，可以继续执行后续的JavaScript代码，而不会停下来等待网络响应。当网络请求完成后，浏览器或Node.js会将对应的回调函数放入消息队列。只有当JavaScript主线程空闲时，事件循环才会将这个回调函数取出并执行。
所以，JavaScript的并发，是“协作式”的并发。主线程通过不断地调度和切换任务，在宏观上给人一种多任务同时进行的错觉。这种模式非常适合I/O密集型应用，因为I/O操作（如网络请求、文件读写）通常耗时较长，但CPU利用率很低，等待时间占据了大部分。事件循环让JavaScript能够在等待I/O的同时，继续处理其他计算任务，极大地提升了应用的响应性。
宏任务（Macrotask）与微任务（Microtask）有什么区别？
理解宏任务和微任务的差异，是掌握事件循环精髓的关键。它们都属于“任务”，但优先级和执行时机截然不同。
宏任务（Macrotask）：宏任务是较大的、独立的任务单元。每次事件循环迭代，只会从宏任务队列中取出一个任务来执行。常见的宏任务包括：
setTimeout() 和 setInterval() 的回调。I/O 操作（例如文件读写、网络请求完成后的回调）。UI 渲染事件（在浏览器环境中，如requestAnimationFrame）。setImmediate() (Node.js 特有)。
微任务（Microtask）：微任务是更小、更紧急的任务。它们通常在当前宏任务执行完毕后，但在下一个宏任务开始之前，被全部清空。这意味着微任务具有更高的优先级。常见的微任务包括：
Promise.then()、.catch()、.finally() 的回调。async/await 中的 await 表达式后面的代码（因为 async/await 是基于 Promise 实现的）。queueMicrotask() 的回调。MutationObserver 的回调（用于监听DOM变化）。
执行顺序的核心差异：事件循环的每次迭代，大致遵循这样的顺序：
执行一个宏任务（例如，整个 script 脚本本身就是一个宏任务）。检查微任务队列，执行并清空所有可用的微任务。执行浏览器渲染（如果需要）。进入下一个事件循环迭代，从宏任务队列中取出下一个宏任务执行。
我们来看一个例子：
console.log('Script start');setTimeout(function() { console.log('setTimeout');}, 0);Promise.resolve().then(function() { console.log('Promise resolved');});console.log('Script end');
这段代码的输出会是：
Script startScript endPromise resolvedsetTimeout
解析：
console.log('Script start') 是同步代码，立即执行。setTimeout 被放入宏任务队列。Promise.resolve().then() 被放入微任务队列。console.log('Script end') 是同步代码，立即执行。当前宏任务（整个 script 脚本）执行完毕。事件循环检查微任务队列，发现 Promise resolved 的回调，立即执行。微任务队列清空。事件循环检查宏任务队列，发现 setTimeout 的回调，执行。
这种机制保证了 Promise 的链式调用能够在一个事件循环周期内完成，而不会被其他宏任务（比如下一个 setTimeout）打断。
编写异步代码时常见的陷阱与最佳实践是什么？
在JavaScript中处理异步操作，虽然事件循环提供了强大的能力，但也伴随着一些常见的陷阱。了解它们并遵循最佳实践，能让你的代码更健壮、更易维护。
常见的陷阱：
阻塞事件循环（Blocking the Event Loop）：这是最致命的错误。如果在主线程中执行了长时间的同步计算任务（例如一个巨大的循环或复杂的数学运算），它会完全占用CPU，导致事件循环无法及时处理消息队列中的回调，进而使UI卡顿、网络请求无法响应，用户体验极差。
示例：
// 这是一个反模式！function longRunningSyncTask() { let i = 0; while (i console.log('Timeout after long task'), 0);
'Timeout after long task' 会在 'Long task finished' 之后很久才出现。
回调地狱（Callback Hell / Pyramid of Doom）：当异步操作层层嵌套，每个操作都依赖于前一个操作的结果时，代码会变得难以阅读和维护。
示例：
getData(function(a) { processA(a, function(b) { processB(b, function(c) { processC(c, function(d) { // ...更多嵌套 }); }); });});
未处理的 Promise 拒绝（Unhandled Promise Rejections）：如果 Promise 链中没有 catch 语句来捕获错误，一旦 Promise 被拒绝，错误可能会被吞噬，或者在某些环境中（如Node.js）导致进程崩溃，难以调试。
对宏任务/微任务执行顺序的误解：不清楚 Promise 在 setTimeout 之前执行，可能导致意料之外的计时问题或数据同步问题。
最佳实践：
拥抱 Promise 和 async/await：这是现代 JavaScript 处理异步的黄金标准。它们能有效解决回调地狱问题，使异步代码看起来更像同步代码，极大地提高了可读性和可维护性。
示例（解决回调地狱）：
async function fetchDataAndProcess() { try { const a = await getData(); const b = await processA(a); const c = await processB(b); const d = await processC(c); // ... console.log('All processed:', d); } catch (error) { console.error('Error during processing:', error); }}fetchDataAndProcess();
始终处理 Promise 拒绝：在每个 Promise 链的末尾添加 .catch()，或者在 async 函数中使用 try...catch 块来捕获潜在的错误。
示例：
somePromiseReturningFunction() .then(data => console.log(data)) .catch(error => console.error('Caught an error:', error));// 或在 async/await 中async function doSomething() { try { const result = await anotherAsyncFunction(); console.log(result); } catch (error) { console.error('Error in async function:', error); }}
避免阻塞主线程：对于长时间运行的计算任务，考虑使用 Web Workers（在浏览器环境中）或 Worker Threads（在Node.js环境中）。Web Workers 可以在独立的线程中执行 JavaScript，从而不阻塞主线程。
简单提及：虽然Web Workers不属于事件循环本身，但它们是JavaScript实现真正并行计算的途径，是解决主线程阻塞问题的根本方案。
理解任务优先级：在调试复杂的异步交互时，牢记微任务优先于宏任务的原则，这能帮助你预测代码的执行顺序，找出潜在的竞态条件或时序问题。
模块化和函数化：将复杂的异步逻辑拆分成小的、可复用的异步函数，每个函数负责一个单一的任务，这有助于保持代码清晰，并降低调试难度。
通过这些实践，你可以更自信、更高效地编写出高性能、可维护的 JavaScript 异步代码。理解事件循环是基础，而掌握这些实践则是将其应用于实际开发的智慧。
以上就是JavaScript中如何理解事件循环的并发模型的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1511738.html
微信扫一扫 
支付宝扫一扫 
