JavaScript中的microtask与task

「爱情、让人受尽委屈。」 2022-03-15 09:14 227阅读 0赞

## JS的任务执行机制 ##

由于 JavaScript 是单线程的，所以它只有一个`Call Stack`，使得 JavaScript 在执行时有一个非常重要的特性：`run to complete`,只要运行就直到完成。

由于是单线程，所以只能通过异步解决性能问题(否则，如果前面一个任务阻塞了，那么后续的任务都要等待，这种效果是无法接受的)。

js在执行代码时存在着两个比较重要的东西：**执行栈**和**任务队列**，这两个东西都是用来存储任务的，区别在于：执行栈里面存着的都是同步任务，也就是要按顺序执行的任务；而任务队列中存着的是一些异步任务，**这些异步任务一定要等到执行栈清空后才会执行**（这句话很重要）。

关于任务队列，它还分成两种，一种叫作`macrotask queue`（姑且这么命名，因为严格来说规范中只有说task，并没有提到`macrotask`这个概念。这里为了容易区分，可以理解为`macrotask=task!=microtask`），另一种叫作`microtask queue`。

如果同时考虑`node`环境和浏览器环境的话，这两种任务分别对应以下`api`：

### microtasks: ###

*  process.nextTick
 *  promise
 *  Object.observe
 *  MutationObserver

### macrotasks: ###

*  setTimeout
 *  setInterval
 *  setImmediate
 *  I/O
 *  UI渲染
 *  script标签中的整体代码

看下面的例子

(function test() { 
        setTimeout(function() { console.log(4)}, 0);
        new Promise(function executor(resolve) { 
            console.log(1);
            for( var i=0 ; i<10000 ; i++ ) { 
                i == 9999 && resolve();
            }
            console.log(2);
        }).then(function() { 
            console.log(5);
        });
        console.log(3);
    })()
    
    // 输出结果：1，2，3，5，4

从输出结果可以推出的：

*  `Promise.then`是异步执行的，而创建`Promise`实例（`executor`）是同步执行的。
 *  `setTimeout`的异步和`Promise.then`的异步看起来 “不太一样” ——至少是不在同一个队列中。

因为`Promise` 属于一个`microtask`。`Eventloop`在执行完堆栈，或者一个`task`后，会优先询问`microtask queue`，如果队列中有任务要执行，则执行，一直到队列为空，然后再执行下一个`task`(每一个`microtask`、`task`都遵循`run to complete`规则)。

## Event Loop（事件循环）是怎么来处理task和microtask的 ##

*  每个线程有自己的事件循环，所以每个`web worker`有自己的，所以它才可以独立执行。然而，所有同属一个`origin`的`windows`共享一个事件循环，所以它们可以同步交流。
 *  事件循环不间断在跑，执行任何进入队列的task。
 *  一个事件循环可以有多个`task source`，每个`task source`保证自己的任务列表的执行顺序，但由浏览器在（事件循环的）每轮中挑选某个`task source`的`task`。
 *  `tasks are scheduled`，所以浏览器可以从内部到JS/DOM，保证动作按序发生。在tasks之间，浏览器可能会`render updates`。从鼠标点击到事件回调需要`schedule task`，解析`html`，`setTimeout`这些都需要。
 *  `microtasks are scheduled`，经常是为需要直接在当前脚本执行完后立即发生的事，比如`async`某些动作但不必承担新开`task`的弊端。`microtask queue`在回调之后执行，只要没有其它JS在执行中，并且在每个task的结尾。`microtask`中添加的`microtask`也被添加到`microtask queue`的末尾并处理。
 *  一个事件循环过程中，只执行一个`macrotask`，但是可能执行多个`microtask`
 *  执行栈中的任务产生的`microtask`会在当前事件循环内执行
 *  执行栈中的任务产生的`macrotask`要在下一次事件循环才会执行

为什么优先执行`microtask`?  
有时候task太重了，每一个`task`结束后，都会重新渲染页面。`microtask`比`task`拥有更高的优先级，可以做一些比较有意思的事情。

### 举例题目的执行流程如下： ###

1.  当前task运行，执行代码。首先`setTimeout`的`callback`被添加到`tasks queue`中；
2.  实例化`promise`，输出 1; `promise resolved`；输出 2;  
    3.`promise.then`的`callback`被添加到`microtasks queue`中；
3.  输出3;
4.  已到当前`task`的`end`，执行`microtasks`，输出 5;
5.  执行下一个`task`，输出4。