摘要：一篇文章和一道面试题最近，有篇名为张图帮你一步步看清和的执行顺序的文章引起了我的关注。作者用一道年今日头条的前端面试题为引子，分步讲解了最终结果的执行原因。从字面意思理解，让我们等等。当前的最新版本，在这里的执行顺序上，的确存在有问题。
一篇文章和一道面试题
最近，有篇名为 《8张图帮你一步步看清 async/await 和 promise 的执行顺序》 的文章引起了我的关注。
作者用一道2017年「今日头条」的前端面试题为引子，分步讲解了最终结果的执行原因。其中涉及到了不少概念，比如异步的执行顺序，宏任务，微任务等等，同时作者限定了执行范围，以浏览器的 event loop 机制为准。下面是原题的代码：
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");
紧接着，作者先给出了答案。并希望读者先行自我测试。
script start async1 start async2 promise1 script end promise2 async1 end setTimeout
我在看这道题的时候，先按照自己的理解写出了结果。
script start async1 start async2 promise1 script end async1 end promise2 setTimeout一些重要的概念
这里需要先简单地说一些 event loop 的概念。
Javascript是单线程的，所有的同步任务都会在主线程中执行。
主线程之外，还有一个任务队列。每当一个异步任务有结果了，就往任务队列里塞一个事件。
当主线程中的任务，都执行完之后，系统会 “依次” 读取任务队列里的事件。与之相对应的异步任务进入主线程，开始执行。
异步任务之间，会存在差异，所以它们执行的优先级也会有区别。大致分为 微任务（micro task，如：Promise、MutaionObserver等）和宏任务（macro task，如：setTimeout、setInterval、I/O等）。同一次事件循环中，微任务永远在宏任务之前执行。
主线程会不断重复上面的步骤，直到执行完所有任务。
另外，还有 async/await 的概念。
async 函数，可以理解为是Generator 函数的语法糖。
它建立在promise之上，总是与await一起使用的。
await会返回一个Promise 对象，或者一个表达式的值。
其目的是为了让异步操作更优雅，能像同步一样地书写。
我的理解再说说我对这道题的理解。
首先，从console的数量上看，会输出8行结果。
再瞟了一眼代码，看到了setTimeout，于是，默默地把它填入第8行。
在setTimeout附近，看到了 console.log( "script start" ) 和 async1()，可以确认它们是同步任务，会先在主线程中执行。所以，妥妥地在第1行填入 script start，第2行填入async1方法中的第一行 async1 start。
接下来，遇到了await。从字面意思理解，让我们等等。需要等待async2()函数的返回，同时会阻塞后面的代码。所以，第3行填入 async2。
讲道理，await都执行完了，该轮到console.log( "async1 end" )的输出了。但是，别忘了下面还有个Promise，有一点需要注意的是：当 new 一个 Promise的时候，其 resolve 方法中的代码会立即执行。如果不是 async1()的 await 横插一杠，promise1 可以排得更前面。所以，现在第4行填入 promise1。
再接下来，同步任务 console.log( "script end" ) 执行。第5行填入 script end。
还有第6和第7行，未填。回顾一下上面提到 async/await 的概念，其目的是为了让异步能像同步一样地书写。那么，我认为 console.log( "async1 end" ) 就是个同步任务。所以，第6行填入async1 end。
最后，顺理成章地在第7行填入 promise2。
与作者答案的不同回过头对比与作者的答案，发现第6和第7行的顺序有问题。
再耐心地往下看文章，反复地看了几遍 async1 end 和 promise2 谁先谁后，还是无法理解为何在chrome浏览器中，promise2 会先于 async1 end 输出。
然后，看到评论区，发现也有人提出了相同的疑惑。@rhinel提出，在他的72.0.3622.0（正式版本）dev（64 位）的chrome中，跑出来的结果是 async1 end 在 promise2 之前。
随即我想到了一种可能，JS的规范可能会在未来有变化。于是，我用自己的react工程试了一下（工程中的babel-loader版本为7.1.5。.babelrc的presets设置了stage-3），结果与我的理解一致。当前的最新版本 chromeV71，在这里的执行顺序上，的确存在有问题。
于是，我也在评论区给作者留了言，进行了讨论。@rhinel最后也证实，其实最近才发布通过了这个顺序的改进方案，这篇 《Faster async functions and promises》 详细解释了这个改进，以及实现效果。不久之后，作者也在他文章的最后，补充了我们讨论的结果，供读者参考。
总结最后，我想说的是，本文虽然只是由一道面试题引申出的，对浏览器执行顺序的思考、讨论与验证的过程。但正是因为有了这些过程，才让更多的思想得以碰撞，概念进一步得以理解，规范得以明了。
有机会的话，希望能有与更多的同道，多多交流。
更新讲道理，async/await 已经出来挺久了，但在近期的面试中，凡是问及异步操作，面试者的回答都还是 Promise，甚至知道 async/await 都很少，看来还有待进一步普及。并不是说 Promise 有什么不好，只是觉得 async/await 用着挺爽的，希望能有更多的人用吧。只有用了，才能进一步理解，产生更多的思考。
所以，这两天翻出了之前写的关于什么是async函数，及其相较于 Promise 的优势。重新整理了一下，原文请前往《细说async/await相较于Promise的优势》。
希望对你有帮助，也期待进一步的交流，感谢！
PS：欢迎关注我的公众号 “超哥前端小栈”，交流更多的想法与技术。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/100308.html
摘要：正如我标题所说，简历被拒。看了我简历之后说头条竞争激烈，我背景不够，点到为止。。三准备面试其实从三月份投递简历开始准备面试到四月份收，也不过个月的时间，但这都是建立在我过去一年的积累啊。 本文是 无精疯 同学投稿的面试经历 关注微信公众号：进击的java程序员K，即可获取最新BAT面试资料一份 在此感谢 无精疯 同学的分享 目录： 印象中的头条 面试背景 准备面试 ...
摘要：正如我标题所说，简历被拒。看了我简历之后说头条竞争激烈，我背景不够，点到为止。。三准备面试其实从三月份投递简历开始准备面试到四月份收，也不过个月的时间，但这都是建立在我过去一年的积累啊。 本文是 无精疯 同学投稿的面试经历 关注微信公众号：进击的java程序员K，即可获取最新BAT面试资料一份 在此感谢 无精疯 同学的分享目录：印象中的头条面试背景准备面试头条一面（Java+项目）头条...
摘要：在这里，如果用箭头函数，可以这样改写箭头函数并没有自己的，所以事件处理函数的调用者并不受影响。比如，在需要动态上下文的场景中，使用箭头函数需要格外地小心，这些场景包括对象的方法原型方法事件的回调构造函数。 showImg(https://segmentfault.com/img/bVboce6?w=1304&h=734); 前言 年味儿渐散，收拾下心情，继续敲代码吧。 对于即将到来金三...
摘要：问题的关键在于其执行过程中的微任务数量，下文中我们需要用上述代码中的方式对微任务的执行顺序进行标记，以辅助我们理解这其中的执行过程。 原文发布在掘金社区：https://juejin.im/post/5c3cc981f265da616a47e028 起源 2019年了，相信大家对 Promise 和 async/await 都不再陌生了。 前几日，我在社区读到了一篇关于 async/...
摘要：但是有一个总的原则那就是总会指向，调用函数的那个对象。作为对象方法的调用函数作为某个对象的方法调用，这时就指这个上级对象。 showImg(https://segmentfault.com/img/bVbnvF7?w=750&h=422); 这是前端面试题系列的第 4 篇，你可能错过了前面的篇章，可以在这里找到： 伪类与伪元素的区别及实战 如何实现一个圣杯布局？ 今日头条 面试题和思...
阅读 3172·2021-09-30 09:48
阅读 3447·2021-09-22 16:00
阅读 1034·2019-08-30 13:08
阅读 3080·2019-08-30 10:53
阅读 2393·2019-08-29 18:33
阅读 1558·2019-08-29 12:47
阅读 856·2019-08-29 12:16
阅读 1911·2019-08-26 12:02
