因为JS是单线程，就是说，同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞，Event Loop 的方案应用而生。
这里我们需要记住，浏览器为了能够使得JS内部(macro)task与DOM任务能够有序的执行，会在一个(macro)task执行结束后，在下一个(macro)task 执行开始前，对页面进行重新渲染
结论：当前宏任务执行完毕，才执行DOM渲染
宏任务包含：
1. 新程序会子程序被直接执行
2. 事件的回调函数
3. setTimeout()和setInterval()
4. I/O
5. UI交互事件
6. setImmediate(Node.js 环境)
记住：在某一个宏任务(macrotask)执行完后，就会将在它执行期间产生的所有微任务(microtask)都执行完毕（在渲染前）。
结论 执行顺序
macrotask --> microtask --> DOM渲染
微任务包含
1. Promise.then().catch().finally()
2. Object.observe
3. MutationObserver
4. process.nextTick(Node.js 环境)
因为Event Loop 会不断循环队列
所以
1. 执行一个宏任务（栈中没有就从事件队列中获取）
2. 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
3. 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
4. 当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
5. 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）
async function async1() {
console.log('1')
await async2()
console.log('2')
}
async function async2() {
console.log('3')
}
console.log('4')
async1();
new Promise(function (resolve) {
console.log('5')
resolve();
}).then(function () {
console.log('6')
})
console.log('7')
// 4 1 3 5 7 2 6
在查看解题思路前我们要先了解一下知识点
2. async 定义的函数也是立即执行
3. async 定义的函数返回值是一个Promise对象
我
4. 阮一峰老师原话
async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。
解题思路
6. 程序首次执行（script下的全部代码）算是宏任务，所以调用栈是script
7. 首先执行到console.log('4') 输出4
8. 执行async1()--> 执行console.log('1')--> 执行await async2() --> console.log('3')输出3
因为await执行完毕后会让出线程，跳出当前函数async1，
9. 执行 new Promise() {...} 因为 Promise 是立即执行的 所以执行console.log('5') 输出5
10. 执行resolve() 后 then收到状态 ，将then(function(){console.log('6')}) 推到微任务队列中
11. 执行 console.log('7')
12. 因为async1中跳出来了，并且后续代码执行完毕，返回到async1中继续执行后续代码 console.log('2')
13. 当前宏任务执行完毕 执行微任务 console.log('6')
参考文档 参考文档1.
但是里卖弄有一个问题，可能是新版浏览器的问题，见下图，
我用的是这个版本的浏览器
以下下这两种情况返回的都是 fulfiled
所以这个题的结果应该是以下
链接: js宏任务与微任务参考.
面试题参考：面试题.
一开始看了面试题参考，但是发现有很多地方看不懂，比如说为什么await会让出线程，然后就去查资料，然后又出现新的疑问，真的是一个面试题炸出这么多问题，谁来救救孩子，好在最后都顺利解决，加油，前端路漫漫~~