JavaScript tasks, microtasks, queues and schedules

Posted 2020-08-04

最近做的项目中，涉及到了javascript中Promise的用法，于是做了一点测试，发现没有想象中的那么简单，水很深，所以找来N先生（我的Mentor），想得到专业的指导。N先生也不尽知，但N先生查源码能力了不起，一小时之内解决了问题，还给我了一篇英文参考文献，拜读后，觉得有必要写一篇随笔，记录所得。

一. 问题

如果输入以下代码，会得到什么样的输出结果？如果连N先生这样在这个行业内浸染了12年的人都无法在最初给出正确的话，想必很多人还是很难回答正确的。不过在看下面的内容前，不妨猜测一下:D

 1 console.log(‘script start‘);
 2 
 3 setTimeout(function() {
 4 
 5   console.log(‘setTimeout‘);
 6 
 7 }, 0);
 8 
 9 Promise.resolve().then(function() {
10 
11   console.log(‘promise1‘);
12 
13 }).then(function() {
14 
15   console.log(‘promise2‘);
16 
17 });
18 
19 console.log(‘script end‘);

正确的顺序为：

script start

script end

promise1

promise2

setTimeout

当然由于不同浏览器支持的问题，在某些特定版本的浏览器下，setTimeout会在promise1，pormise2的前面，比如Microsoft Edge, Firefox 40, ios Safari 和 desktop Safari 8.0.8。

这看起来像是资源竞争(race condition)的问题，但实际上并不是。

二. 为什么会是以上的顺序

要理解为什么是以上的顺序发生，我们需要掌握事件队列(event loop)是如何处理JavaScript Tasks 和 microtasks的。如果你是第一次碰到这个问题，那么，请深吸一口气，接着往下看:D

每个工作线程(Web worker)都有自己的事件队列，他们各自相互不影响，每个线程的事件队列，都会对进队的tasks任务进行处理。如果有很多的task在一个工作线程的队列里等待处理，那么，需要由浏览器来决定执行的先后顺序。

这时，浏览器就可以给那些性能敏感(performance sensitive)的task优先权，比如对用户输入的反应。

Tasks会被排定好，于是browser可以按顺序将它带给JavaScript/DOM。在task和task的中间，浏览器或许会渲染更新。比如鼠标点击的回调函数就可以排定一个task，再比如，setTimeOut。

setTimeOut会在给定的时间之后，对回调函数排定一个Task，script end是第一个task，而setTimeout是独立的另一个task，这也就是为什么setTimeout会在scrript end之后输出。

Mircrotasks经常会被排定在当前执行脚本结束之后立即执行，这样的task比如想把事情做成异步，但又不想建立一个全新的task。Microtasks queue会在当前没有JavaScript事件正在执行，并且已经到了每个task结束的时候处理。任何新入队的microtask在正在执行microtask queue时，也会被马上处理。在以上的例子中，promise的回调函数就是microtask。

一旦一个promise解决了，它会将自己的回调函数加入microtask queue。这保证了即使promise及时解决了，它的回调函数还是异步执行的。这就是为什么promise1，promise2为什么在script end后面执行。Microtask总是在下一个task开始前发生。

 

三. 为什么有些浏览器会有不同的表现呢

其实是因为“将promise作为task还是microtask引起的”。针对这个已经有了很多的讨论，但舆论基本是同意将promise作为microtask的。理由我就不列了，相信大家也能自己琢磨的到:D

 

Cheers,

You have a nice day!

Lei