对于EventLoop的理解

EventLoop是什么

即事件循环，是指浏览器或Node的一种解决JavaScript单线程运行时不会阻塞的一种机制，也就是实现异步的原理。作为一种单线程语言，JavaScript本身是没有异步这一说法的，是由其宿主环境提供的。

宏任务与微任务

JavaScript代码运行时，任务分为宏任务和微任务两种，Event Loop也将任务队列分为宏队列和微队列分别管理宏任务和微任务，宏队列和微队列也具备队列特性：先进先出。

1.微任务

1. Promise中的then、catch、finally
2. MutationObserver（监视DOM变动的API）
3. Process.nextTick（Node环境）

2.宏任务

4. script中全部代码
5. DOM操作
6. 用户交互操作
7. 所有的网络请求
8. 定时器相关的setTimeout、setInterval等

事件循环的进程模型

1. 选择当前要执行的宏任务队列，选择一个最先进任务队列的宏任务，如果没有宏任务，则会跳转至微任务的执行步骤。
2. 将事件循环的当前运行宏任务设置为已选择的宏任务。
3. 运行宏任务。
4. 将事件循环的当前运行任务设置为null。
5. 将运行完的宏任务从宏任务队列中移除。
6. 微任务步骤：进入微任务检查点。
7. 更新界面渲染。
8. 返回第一步。
   只要主线程空了，就会读取任务队列，这就是js的运行机制，也被称为EventLoop机制。
   在同一个上下文中，总的执行顺序：同步代码→微任务→宏任务

console.log("1")
setTimeout(()=>{
    console.log('2')
    new Promise(function(resolve){
     console.log("3")
      resolve();
}).then(function() {
        console.log('4')
    })
}, 0)

setTimeout(()=>{
    console.log('5')
    Promise.resolve().then(function() {
        console.log('6')
    })
}, 0)
console.log("7")

浏览器输出：
1
7
2
3
4
5
6

首先执行同步任务，先打印1
执行到第一个setTimeout属于宏任务，挂起放到宏任务队列，遇到第二个setTimeout也是挂起放到宏任务队列。
接着打印7。
同步任务执行完成→js执行栈为空→去查找微任务：微任务为空→查到宏任务。
执行第一个宏任务，打印2，接着执行new Promise，打印3，Promise.then属于微任务，挂起放到微任务队列中。
宏任务执行完成→js执行栈为空→查找微任务：打印4
继续循环查找宏任务，执行到第二个setTimeout，执行顺序同上。