事件循环机制

事件循环是 JavaScript 的一种执行机制，用于协调异步任务的执行顺序、传递消息以及处理用户交互等事件。事件循环由以下四个组成部分组成。

1. 调用栈（Call Stack）：调用栈是 JavaScript 的一种执行机制，用于控制函数的执行顺序。当函数被调用时，将函数压入调用栈中，并开始执行函数，函数执行完成后从调用栈中弹出并返回结果。如果调用栈为空，则脚本停止执行。

2. 任务队列（Task Queue）：任务队列是 JavaScript 的一种执行机制，用于存储异步任务的回调函数。当异步任务完成时，将回调函数添加到任务队列中等待被执行。

3. 事件循环（Event Loop）：事件循环是 JavaScript 的一种执行机制，用于协调调用栈和任务队列的执行顺序。事件循环不断地从任务队列中取出第一个回调函数，并将其压入调用栈中执行，直到任务队列为空为止。

4. 微任务队列（Microtask Queue）：微任务队列是在事件循环的回调函数执行过程中产生的，用于存储微任务的回调函数。当微任务产生后，会被添加到微任务队列中，等待事件循环调用栈为空时执行。微任务包括 Promise、MutationObserver 等。

简单来说，事件循环机制就是将所有的任务分成两类，一类是同步任务，另一类是异步任务，将异步任务挂起，并将其回调函数添加到任务队列中等待执行，待同步任务执行完成后，再从任务队列中取出异步任务的回调函数，添加到调用栈中执行。所有的异步任务都是由事件循环机制来控制它们的执行时机和顺序。

宏任务和微任务都属于异步任务的一种，它们的区别在于任务队列不同，执行的时机也不同。

宏任务（Macro Task）：
宏任务指的是那些需要长时间运行的任务，例如 I/O 操作、setTimeout 和 setInterval 等。每个宏任务执行完成后，都会清空微任务，然后从宏任务队列中取出下一个任务执行。

微任务（Micro Task）：
微任务指的是那些需要尽可能快速执行的任务，例如 Promise 的 resolve 方法、MutationObserver 等。当每个宏任务执行完毕并清空微任务队列，会接着执行当前微任务队列中的任务，直到执行完毕为止。

事件循环机制是先执行当前宏任务中的所有同步代码，再去取宏任务队列中队首的宏任务执行，当遇到微任务时，将其全部取出来按照顺序执行完，在执行下个宏任务。

简单来说，宏任务与微任务的区别在于它们的执行顺序和优先级，宏任务的优先级低于微任务，因为宏任务需要等待当前的同步任务执行完成后才会执行，而微任务则是直接进入微任务队列中等待执行。在使用异步任务时，可以根据需要将任务分为宏任务和微任务，以便更好地管理异步代码的执行顺序和优先级。