每天一个小知识：你了解浏览器的事件循环吗

1.你了解浏览器的事件循环吗？

1.1 为什么js在浏览器中有时间循环机制？
JS是单线程的
even loop 实现了XXXX
1.2 你了解事件循环中有两种任务吗？
宏任务和微任务
1.2.1 什么是宏任务什么是微任务都是做什么的
宏任务：整体代码，setTimeout,setInterval,
微任务：new Promise().then,MutaionObserver(前端的回溯)
1.3 为什么一定要区分宏任务和微任务，只有一种不行吗，只有宏任务可以吗？
页面的渲染过程中所有的任务都保持先进先出的原则执行，过程中插入了有了优先级特别高的任务，由于宏任务由先到后执行，则这个任务就不能尽快执行了，所以要有微任务；
所以就是先执行宏任务，宏任务一个一个有先后顺序执行，每执行完一个宏任务就会去微任务列表中看下有没有微任务，有的话就先把所有的微任务执行完，再去执行下一个宏任务；
1.4Node中的事件循环和浏览器中的事件循环有什么区别？
宏任务的执行顺序：
（1）timers定时器：之行已经安排的setTimeout 和 setInterval的回调函数
（2）pendIng callback 待定回调：执行延迟到下一个循环迭代的I/O回调
（3）idle,prepare:仅系统内部使用
（3）poll:检索新的I/O事件，执行与I/O相关的回调
（4）check:执行setImmediate（）回调函数
（5）close callback：socket.on('close',()=>{})
微任务和宏任务在Node中的执行顺序：
node版本10之前和之后不一致
V10及以前：1.执行完一个阶段中的所有任务2.执行nextTick队列里的内容3.执行微任务队列的内容
V10以后：跟浏览器的行为统一了

题目：
async function async1(){
console.log('async1 start')
await async2();
console.log('async1 end')
}
async function async2(){
console.log('async2')
}
console.log('script start')
setTimeout(function () {
console.log('setTimeout')
},0)
async1()
new Promise(function (resolve) {
console.log('promise1')
resolve()
}).then(function () {
console.log('promise2')
})
console.log('script end')
答案： console.log('script start') console.log('async1 start') console.log('async2')console.log('promise1') console.log('script end') console.log('async1 end') console.log('promise2') console.log('setTimeout')
理由：JS是顺序执行，根据浏览器的事件机制，整个代码体是一个宏任务，自上而下执行，async1是个方法暂不执行，往下async2是个方法暂不执行，所以'script start'最先打印出来，往下是setTimeout是一个单独的宏任务所以延后，再往下是async1方法调用，'async1 start'打印出来，有await所以继续打印'async2'，然后后面的（'async1 end'）加入微任务队列，然后继续执行'promise1'，然后遇到.then继续加入到微任务队列，然后执行'script end'，第一个宏任务执行完毕，然后开始执行微任务队列'async1 end' 'promise2' 微任务执行完毕后执行下一个宏任务setTimeout'setTimeout'；所有任务执行完毕