浏览器事件循环机制

前言

事件循环是浏览器处理异步任务的一种机制

 它包括以下几个部分。

1. 调用栈（Call Stack）：调用栈是一个存储函数调用记录的数据结构。当一个函数被调用时，它的执行上下文（包括局部变量、参数等）会被压入栈中。当函数执行完毕后，它的执行上下文会从栈中弹出。

2. Web API：Web API是一组用于操作浏览器功能的接口，如DOM操作、定时器、事件监听等。这些API通常都是同步执行的，但在某些情况下，它们可能会返回Promise对象，这时需要将回调函数添加到微任务队列中等待执行。

3. 微任务队列（Microtask Queue）：微任务队列是一个存储待执行的微任务的队列。微任务是指在当前执行栈执行完毕后，下一个要执行的任务。微任务队列中的任务会在当前执行栈清空后立即执行。常见的微任务有：Promise对象的then方法、MutationObserver的回调函数等。

4. 宏任务队列（Macrotask Queue）：宏任务队列是一个存储待执行的宏任务的队列。宏任务是指在当前执行栈为空，且没有其他宏任务在执行的情况下，下一个要执行的任务。宏任务队列中的任务会在当前执行栈为空时执行。常见的宏任务有：setTimeout、setInterval、DOMContentLoaded事件等。

5. Event Loop：事件循环是浏览器处理异步任务的核心机制。它会根据宏任务队列和微任务队列中的任务顺序依次执行。当宏任务队列为空时，事件循环会检查微任务队列，将其中的微任务添加到调用栈中执行。当微任务队列也为空时，事件循环会再次检查宏任务队列，直到所有宏任务和微任务都执行完毕。

浏览器的JavaScript事件循环过程按照以下顺序执行：

1. 调用栈中执行同步代码
2. 同步代码执行过程中：将宏任务和微任务推送到所属的任务队列中
3. 调用栈中同步代码执行完毕
4. 先执行微任务队列，一项项执行步骤1，2，3，直至队列为空
5. 执行宏任务队列，执行每个宏任务前，要先判断是否有微任务，有微任务则执行步骤4，否则执行当前宏任务，执行步骤1，2，3
6. 执行完所有宏任务和微任务后，清空消息队列。
7. 结束