先看下面的例子
console.log('script start');async function async1(){console.log('async1 start');await async2();console.log('async1 end');}async function async2(){console.log('async2 end');}async1();setTimeout(function(){console.log('setTimeout');},0)new Promise(resolve=>{console.log('Promise');resolve();}).then(function(){console.log('promise1');})console.log('script end');复制代码
执行结果如下：
script startasync1 startasync2 endPromisescript endpromise1async1 endsetTimeout复制代码
注意：在新的浏览器中打印的结果不是这样，是下面的样子
为什么会不一样？ 我们先简单说一下是v8团队借鉴了node8中的一个Bug，为了提升性能，在引擎底层将三次tick减少到了2次。但是这样做违反了规范，不过规范也是人制定的，是可以在一定情况下，修改的。传送门,想了解的可以看这里
我们还是按照规范理解上面的打印结果
1.首先打印出script start (这个就不讲了)2.执行到async1()的时候，首先会打印出async1 start，因为async表达式定义的函数也是立即执行的3.然后执行到await async2(),发现saync2也是个async定义的函数，所以直接执行 async2 end，同时async2返回一个Promise,
重点:此时返回的Promise会被放入到回调队列中等待，await会让出线程（js是单线程的），接下来跳出async1函数，继续往下执行；4.然后执行到setTimeout，setTimeout是宏任务，会等到执行栈（调用栈）清空之后，微任务全部执行完毕之后，才会去执行，所以setTimeout会被挂起，最后执行5.然后到了new Promise，new Promise是立即执行的，所以会立即打印出Promise；(Promise是一个立即执行的函数，但是它的成功（resolve()）或失败(reject())回调函数确实一个异步执行的回调。)
然后执行resolve()的时候，resolve()这个任务会被放入回调队列中，等到调用栈有空闲的时候，事件循环（Event Loop）再来取走它， 这时候会跳出Promise,继续往下走6.输出script end；7.同步任务已经全部执行完毕，执行栈现在已经空闲出来，那么事件循环就会去回调队列中取任务继续放到执行栈中执行；8.这时候取的第一个任务就是async2放进去的Promise,执行Promise的时候遇到了resolve函数，
resolve又回被放入到任务队列中继续等待，然后再次跳出async1 继续下一个任务9.接下来取走的就是new Promise放进去的resolve回调，这个被调用栈执行，并输出promise1，然后继续取下一个任务10.这次终于取到了那么Promise的resolve回调，因为async2并没有return内容，所以这个resolve的参数是undefined，此时await定义的Promise已经执行完毕并且返回了结果，所以可以继续往下执行async1函数后面的任务了，于是输出async1 end11.上面的微任务执行完毕之后，开始执行宏任务中的异步setTimeout
总结：Event Loop 执行顺序如下：
1 首先执行同步任务，这属于宏任务2.当执行完所有同步任务代码之后，执行栈为空，查询是否有异步代码需要执行3.执行所有微任务4.当执行完所有微任务后，如果有必要会渲染页面5.然后开始下一轮的Event Loop,执行宏任务中的异步代码，也就是setTimeout中的回调函数
宏任务：
1.script2.setTimeout3.setInterval4.setImmediate5.I/O6.UI rendering
微任务:
1.process.nextTick(node 独有)2.promise3.MutationObserver
