揭秘浏览器 Event Loop 的奥秘：宏任务、微任务和事件冒泡

Event Loop 的基本原理

Event Loop 是一个循环运行的事件处理机制，它负责接收和处理来自浏览器的事件，并调度执行相应的任务。Event Loop 的基本原理如下：

1. 初始化执行栈（Execution Stack）： Event Loop 会首先创建一个执行栈，它是用来存放当前正在执行的任务。
2. 事件触发： 当浏览器发生事件（如点击、鼠标移动、网络请求完成等）时，Event Loop 会将这些事件放入事件队列（Event Queue）中。
3. 事件处理： Event Loop 会从事件队列中取出一个事件，并将其放入执行栈中执行。
4. 任务执行： 任务在执行栈中执行时，如果遇到异步操作（如 setTimeout、Promise.then() 等），Event Loop 会将该任务从执行栈中移出，并放入对应的队列（如宏任务队列或微任务队列）中。
5. 任务调度： 当执行栈中的任务执行完毕后，Event Loop 会检查宏任务队列和微任务队列，并将队列中的任务依次放入执行栈中执行。

宏任务和微任务

在 Event Loop 中，任务分为宏任务和微任务。宏任务包括脚本执行、setTimeout 和 setInterval 等，而微任务包括 Promise.then() 和 MutationObserver 等。宏任务和微任务的主要区别在于执行顺序：

• 宏任务： 宏任务会在当前执行栈中的所有任务执行完毕后，才开始执行。
• 微任务： 微任务会在当前执行栈中的所有任务执行完毕后，立即执行。

因此，如果一个宏任务中包含一个微任务，那么该微任务会在宏任务执行完毕后立即执行，而不会等到下一个宏任务开始执行。

事件冒泡

事件冒泡是 DOM 事件的一种重要机制，当事件发生时，它会从最具体的元素开始向上冒泡，直到到达文档根元素。例如，如果在一个按钮上发生点击事件，那么该事件会从按钮元素开始冒泡，然后依次冒泡到按钮的父元素、祖父元素，直到到达文档根元素。

事件冒泡机制可以用来捕获事件，并对事件进行处理。例如，我们可以使用事件冒泡机制来实现点击一个按钮时，同时触发该按钮的父元素和祖父元素的点击事件。

总结

Event Loop、宏任务、微任务和事件冒泡是 JavaScript 运行时环境的重要概念，理解这些概念对于编写高效的 JavaScript 代码至关重要。