2018-05-29 | 前端面试手记 | UNLOCK

谈谈promise/async/await的执行顺序与V8引擎的BUG

1. 题目和答案

故事还是要从下面这道面试题说起:请问下面这段代码的输出是什么?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
console.log('script start')

async function async1() {
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')
})
.then(function() {
console.log('promise2')
})

console.log('script end')

上述,在Chrome 66node v10中,正确输出是:

1
2
3
4
5
6
7
8
script start
async2 end
Promise
script end
promise1
promise2
async1 end
setTimeout

注意:在新版本的浏览器中,await输出顺序被“提前”了,请看官耐心慢慢看。

2. 流程解释

边看输出结果,边做解释吧:

  1. 正常输出script start
  2. 执行async1函数,此函数中又调用了async2函数,输出async2 end。回到async1函数,遇到了await,让出线程
  3. 遇到setTimeout,扔到下一轮宏任务队列
  4. 遇到Promise对象,立即执行其函数,输出Promise。其后的resolve,被扔到了微任务队列
  5. 正常输出script end
  6. 此时,此次Event Loop宏任务都执行完了。来看下第二步被扔进来的微任务,因为async2函数是async关键词修饰,因此,将await async2后的代码扔到微任务队列中
  7. 执行第4步被扔到微任务队列的任务,输出promise1promise2
  8. 执行第6步被扔到微任务队列的任务,输出async1 end
  9. 第一轮EventLoop完成,执行第二轮EventLoop。执行setTimeout中的回调函数,输出setTimeout

3. 再谈async和await

细心的朋友肯定会发现前面第6步,如果async2函数是没有async关键词修饰的一个普通函数呢?

1
2
3
4
// 新的async2函数
function async2() {
console.log('async2 end')
}

输出结果如下所示:

1
2
3
4
5
6
7
8
script start
async2 end
Promise
script end
async1 end
promise1
promise2
setTimeout

不同的结果就出现在前面所说的第6步:如果await函数后面的函数是普通函数,那么其后的微任务就正常执行;否则,会将其再放入微任务队列。

4. 其实是V8引擎的BUG

看到前面,正常人都会觉得真奇怪!(但是按照上面的诀窍倒也是可以理解)

然而V8团队确定了这是个bug(很多强行解释要被打脸了),具体的PR请看这里。好在,这个问题已经在最新的Chrome浏览器中被修复了

简单点说,前面两段不同代码的运行结果都是:

1
2
3
4
5
6
7
8
script start
async2 end
Promise
script end
async1 end
promise1
promise2
setTimeout

await就是让出线程,其后的代码放入微任务队列(不会再多一次放入的过程),就这么简单了。

请针对 Disqus 开启代理