浏览器/NodeJS中EventLoop的运作机制揭秘：微任务，宏任务，代码执行的全景
2024-02-02 03:57:58
微任务与宏任务：任务队列中的不同角色
在 JavaScript 中，任务被分为微任务和宏任务。微任务包括 promise.then()、MutationObserver 和 process.nextTick()；而宏任务包括 setTimeout()、setInterval()、I/O 操作和 UI 渲染。这些任务被分别放入两个不同的队列中：微任务队列和宏任务队列。
Event Loop 的运作流程：代码执行的幕后推手
Event Loop 不断地在两个队列之间循环，当一个队列中的任务执行完毕，就会检查另一个队列是否有任务需要执行。如果微任务队列中有任务，则会立即执行；如果没有，则会检查宏任务队列是否有任务需要执行。这样就保证了微任务总是在宏任务之前执行。
微任务的优先级：谁先执行谁后执行
微任务总是优先于宏任务执行。这是因为微任务是在当前执行栈中执行的，而宏任务是在执行栈清空后才执行。因此，在执行宏任务之前，所有微任务都必须先执行完毕。
代码执行的完整流程：从触发到执行
-
触发事件：当一个事件发生时，例如点击按钮或收到网络请求，浏览器就会将该事件添加到事件队列中。
-
事件循环：Event Loop 不断地循环，检查事件队列中是否有事件需要处理。如果有，则将其移动到执行栈中执行。
-
执行栈：执行栈是一个后进先出的栈，它存储着当前正在执行的代码。代码从执行栈的顶部开始执行，依次向下执行。
-
任务队列：当执行栈中的代码执行完毕，Event Loop 会检查微任务队列和宏任务队列中是否有任务需要执行。如果有，则将它们移动到执行栈中执行。
-
重复循环：Event Loop 不断地重复循环，依次执行事件队列、执行栈和任务队列中的任务。
理解 Event Loop 的重要性：掌握代码执行的脉搏
理解 Event Loop 的运作方式对于掌握 JavaScript 的代码执行机制至关重要。它可以帮助您编写出更有效、更具可预测性的代码。在编写异步代码时，您需要考虑微任务和宏任务的优先级，并合理安排任务的执行顺序。
结语
Event Loop 是 JavaScript 编程的核心机制之一，掌握它的运作方式可以帮助您编写出更高效、更具可预测性的代码。通过理解微任务和宏任务的优先级，您可以控制任务的执行顺序，并避免潜在的性能问题。
