什么是事件循环

事件循环

JavaScript 在设计之初便是单线程，即指程序运行时，只有一个线程存在，同一时间只能做一件事
为了解决单线程运行阻塞问题，JavaScript用到了计算机系统的一种运行机制，这种机制就叫做事件循环（Event Loop）

事件循环中：所有任务可以分为同步任务和异步任务

执行机制

1. 先将同步任务推入调用栈，异步任务加入任务队列，
2. 当同步任务执行完成之后，查看是否有异步任务，若有的话就将异步任务（一条）加入主执行栈
3. 异步任务完成后，将其回调函数加入任务队列，等待事件循环将其执行，这样一直循环就是事件循环

异步任务

异步任务又分为宏任务与微任务

宏任务（Macro tasks）：

宏任务代表一组异步任务，它们在事件循环中形成一个独立的任务队列。
宏任务包括了一些常见的异步操作，如定时器回调、I/O操作、UI渲染等。
当宏任务队列中的任务执行完成后，事件循环才会检查并执行微任务队列中的任务。

○ 定时器回调（setTimeout、setInterval等）
○ DOM事件处理程序（点击事件、键盘事件等）
○ XMLHttpRequest和Fetch API
○ 文件读写操作
○ UI渲染

微任务（Micro tasks）：

微任务是一组异步任务，它们有更高的优先级，通常在当前宏任务执行完毕后立即执行。微任务通常用于处理异步操作的结果，它们允许在主线程的执行上下文中执行，而不需要等待下一个宏任务。

常见的微任务包括：

○ Promise的then方法
○ async/await的await表达式
○ MutationObserver的回调
○ process.nextTick（Node.js中的微任务）

在事件循环中，宏任务和微任务的执行顺序是有规定的。通常，事件循环会首先执行当前宏任务 ( 每个script标签的加载和解析都会被视为一个宏任务 )

然后依次清空微任务队列中的任务，再去检查是否有新的宏任务。

这个流程循环执行，确保了异步任务的有序执行。

await

如果遇到await，在执行完await 后面的代码后，事件循环会继续执行，将await下面的加入到微任务队列，继续进行事件循环

案例

async function fn1 (){
    console.log(1)
    await fn2()
    console.log(2) 
}

async function fn2 (){
    console.log('fn2')
}

await fn1()
console.log(3)

上述代码的输出结果是 1—> fn2 —>3—>2

1. 首先执行的是log（1）输出1
2. 执行到await的时候，会停下来执行fn2() ，输出fn2后，继续事件循环，将下面的语句加入到微任务队列
3. 输出3，宏任务执行完毕，调用栈空
4. 执行微任务队列中的任务，输出 2

参考

说说你对事件循环的理解