流程图执行-步骤二：
上面已经把同步代码执行完成，并且把对应异步回调事件放到了指定任务队列，接下来开始事件循环。
扫描微任务队列，执行4 => { console.log('then', 4) }回调函数，控制台输出then 4。
微任务队列为空，扫描宏任务队列，执行() => {console.log('setTimeout', 2)}回调函数，控制台输出setTimeout 2。
每执行完一个宏任务，需要再次扫描微任务队列是否存在可执行任务（假设此时后台定时到了，则会把() => { console.log('setTimeout', 5) }加入到了宏任务队列末尾）。
微任务队列为空，扫描宏任务队列，执行() => { console.log('setTimeout', 5) }，控制台输出setTimeout 5。
演示三：稍有难度
setTimeout+Promise组合拳+多层嵌套Promise
console.log(1)
setTimeout(() => {
console.log('setTimeout', 10)
}, 0)
new Promise((resolve, reject) => {
console.log(2)
resolve(7)
new Promise((resolve, reject) => {
resolve(5)
}).then(res => {
console.log(res)
new Promise((resolve, reject) => {
resolve('嵌套第三层 Promise')
}).then(res => {
console.log(res)
})
})
Promise.resolve(6).then(res => {
console.log(res)
})
}).then(res => {
console.log(res)
})
new Promise((resolve, reject) => {
console.log(3)
Promise.resolve(8).then(res => {
console.log(res)
})
resolve(9)
}).then(res => {
console.log(res)
})
console.log(4)
上一个演示说明了流程图执行的详细步骤，下面就不多加赘叙了，直接看图！
talk is cheap, show me the chart
上图，调用栈同步代码执行完成，开始事件循环，先看微任务队列，发现不为空，按顺序执行微任务事件：
上图，已经把刚才排队的微任务队列全部清空了。但是在执行第一个微任务时，发现还有嵌套微任务，则把该任务放到微任务队列末尾，然后接着一起执行完所有新增任务。
最后微任务清空后，接着执行宏任务。到此全部事件已执行完毕！
控制台完整输出顺序：
1 2 3 4 5 6 7 8 9 10
演示四：setTimeout伪定时
setTimeout并不是设置的定时到了就马上执行，而是把定时回调放在task queue任务队列当中进行等待，待主线程调用栈中的同步任务执行完成后空闲时才会执行。
代码高亮：
const startTime = Date.now()
setTimeout(() => {
const endTime = Date.now()
console.log('setTimeout cost time', endTime - startTime)
// setTimeout cost time 2314
}, 100)
for (let i = 0; i < 300000; i++) {
// 模拟执行耗时同步任务
console.log(i)
}
控制台输出：
1 2 3 ··· 300000 setTimeout cost time 2314
下图演示了其执行流程：
演示五：fetch网络请求和setTimeout
获取网络数据，fetch回调函数属于微任务，优于setTimeout先执行。
setTimeout(() => {
console.log('setTimeout', 2)
}, 510)
const startTime = Date.now()
fetch('http://localhost:3000/test').then(res => {
const endTime = Date.now()
console.log('fetch cost time', endTime - startTime)
return res.json()
}).then(data => {
console.log('data', data)
})
下图当前Call Stack执行栈执行完同步代码后，由于fetch和setTimeout都是宏任务，所以走宏任务Web API流程后注册这两个事件回调，等待定时到后了，由于定时回调是个普通的同步函数，所以放到宏任务队列；等待fetch拿到服务器响应数据后，由于fetch回调为一个Promise对象，所以放到微任务队列。
经过多番刷新网页测试，下图控制台打印展示了setTimeout延时为510ms，fetch请求响应同样是510ms的情况下，.then(data => { console.log('data', data) })先执行了，也是由于fetch基于Promise实现，所以其回调为微任务。
结语
这可能只是简单的JavaScript代码执行事件循环流程，目的也是让大家更直观理解其中原理。实际执行过程可能还会读取堆内存获取引用类型数据、操作dom的方法，可能还会触发页面的重排、重绘等过程、异步文件读取和写入操作、fetch发起网络请求，与服务器建立连接获取网络数据等情况。
但是，它们异步执行的回调函数都会经过图中的这个事件循环过程，从而构成完整的浏览器事件循环。
参考文章：原文链接
400 186 1886
