一、什么是Event Loop🤔

JavaScript是一门单线程语言它一个时间只能做一件事；

在js代码运行的时候。会形成一个执行栈，每调用一个函数，就会把该函数的执行上下文放入执行栈；其实，

对了还有任务队列存放待完成的任务，在js中。有同步任务和异步任务异步任务又分为宏任务和微任务；老实说，

因为script代码整体就是一个宏任务，所以事件循环先从一个宏任务开始。当执行完宏任务后就从微任务队列拿微任务到执行栈中执行，当前微任务队列所有微任务执行完后就执行宏任务队列的下一个宏任务；

接下来重复这个操作。直到任务队列里的任务执行完，这个过程就叫事件循环。

二、宏任务和微任务📜

JavaScript 的事件分两种，宏任务和微任务。怎么说呢，

. 宏任务

• script
• setTimeout
• setInterval
• setImmediate

. 微任务

• promise.n promise.catch 的回调cb
• async await
• mutationObserver ==> 监听DOM的改变
• process.nextTick ==> Node

关系： 微任务是包含在宏任务里面的。一个宏任务中，可以有多个微任务。

. 执行顺序

• script代码块可以看做第一个宏任务，开始第一个Tick事件循环。
• 会先执行script代码块中的同步代码。
• If 遇到宏任务。就放到宏任务队列中等待执行,如果遇到微任务，放到微任务队列中。
• 当主线程执行完同步代码的时候，去微任务队列中清空当前事件循环的所有微件。
• If 还有异步的宏task，那么就会进行循环执行上述的操作。老实说，

三、来点例子🌰

从eg1来看。

const promise = new Promise => {
console.log;resolve，console.log;}).n(val => {
console.log;})，promise.n => {
console.log;})，console.log;setTimeout {
console.log;})，//

执行结果为的观点是，

再看eg2。

async function async1 {
console.log
await async2
// await这一行，这个async2 同步执行的;await的下面放到微task队列
console.log // 这一行。相当于放到.n中 微1
console.log
}
async function async2 {
console.log
}
console.log
setTimeout {
console.log // 放到宏task队列中 宏1
},)
async1;new Promise {
console.log
resolve;}).n {
console.log // 微task 微2
});console.log
// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// setTimeout

✨✨✨✨✨✨✨✨✨✨

`