JS事件循环(Event Loop)

js中的事件循环是JavaScript代码在浏览器运行中的一种机制，是解决JavaScript单线程运行时不会阻塞的机制
话说JavaScript运行时，分为两种任务，宏任务和微任务，event loop在执行和协调各种任务时会按照宏任务和微任务的先后顺序执行，遵循队列的特性：先进先出；
1、微任务：
在实际html标准中并没有定义和明确规定，但在实际开发中主要包含以下四种：
* Promise中的then、catch、finally
* MutationObserver（监视 DOM 变动的API，详情参考MDN）
* Object.observe(废弃：监听标准对象的变化)
* Process.nextTick（Node环境，通常也被认为是微任务）
2、宏任务
基本上，我们将javascript中非微任务（MircoTask）的所有任务都归为宏任务，比如：

script中全部代码
DOM操作
用户交互操作
所有的网路请求
定时器相关的 setTimeout、setInterval 等

阐述事件循环机制：
1）主线程自上而下依次执行所有代码；
2）同步任务直接进入到主线程被执行；
3）异步任务进入到Event Table（列表），当异步任务有结果后，将相对应的回调函数进行注册，放入Event Queue（栈中）；
4）主线程任务执行完空闲下来后，从Event Queue（FIFO）中读取任务，放入主线程执行；
5）放入主线程的Event Queue任务继续从第一步开始，如此循环执行；

image.png

理解：

image.png

输出：

//首层宏任务代码执行输出
script start
enter promise
script end
//首层微任务队列代码执行输出
promise then 1
promise then 2
//第二层宏任务队列代码执行输出
setTimeout

image.png