从promise、process.nextTick、setTimeout出发，谈谈Event Loo

zero 发布于2019-08-23 10:42 / 1630人阅读

摘要：比如下面一个例子例输出为先输出，没有问题，因为是同步任务在主线程中优先执行，这里的问题是和任务的执行优先级是如何定义的。

在原文的基础上加了一点参考资料

问题的引出

event loop都不陌生，是指主线程从“任务队列”中循环读取任务，比如

例1：

setTimeout(function(){console.log(1)},0);

console.log(2)

//输出2,1

在上述的例子中，我们明白首先执行主线程中的同步任务，当主线程任务执行完毕后，再从event loop中读取任务，因此先输出2，再输出1。

event loop读取任务的先后顺序，取决于任务队列（Job queue）中对于不同任务读取规则的限定。比如下面一个例子：

例2：

setTimeout(function () {
  console.log(3);
}, 0);

Promise.resolve().then(function () {
  console.log(2);
});
console.log(1);
//输出为  1  2 3

先输出1，没有问题，因为是同步任务在主线程中优先执行，这里的问题是setTimeout和Promise.then任务的执行优先级是如何定义的。

2 . Job queue中的执行顺序
在Job queue中的队列分为两种类型：macro-task和microTask。我们举例来看执行顺序的规定，我们设

macro-task队列包含任务: a1, a2 , a3
micro-task队列包含任务: b1, b2 , b3

执行顺序为，首先执行marco-task队列开头的任务，也就是 a1 任务，执行完毕后，在执行micro-task队列里的所有任务，也就是依次执行b1, b2 , b3，执行完后清空micro-task中的任务，接着执行marco-task中的第二个任务，依次循环。

了解完了macro-task和micro-task两种队列的执行顺序之后，我们接着来看，真实场景下这两种类型的队列里真正包含的任务（我们以node V8引擎为例），在node V8中，这两种类型的真实任务顺序如下所示：

macro-task队列真实包含任务：

script(主程序代码),setTimeout, setInterval, setImmediate, I/O, UI rendering

micro-task队列真实包含任务：
process.nextTick, Promises, Object.observe, MutationObserver

由此我们得到的执行顺序应该为：

script(主程序代码)—>process.nextTick—>Promises...——>setTimeout——>setInterval——>setImmediate——> I/O——>UI rendering

在ES6中macro-task队列又称为ScriptJobs，而micro-task又称PromiseJobs

3 . 真实环境中执行顺序的举例
(1) setTimeout和promise
例3:

setTimeout(function () {
console.log(3);
}, 0);

Promise.resolve().then(function () {
console.log(2);
});

console.log(1);

我们先以第1小节的例子为例，这里遵循的顺序为：

script(主程序代码)——>promise——>setTimeout
对应的输出依次为：1 ——>2————>3

(2) process.nextTick和promise、setTimeout
例子4：

setTimeout(function(){console.log(1)},0);

new Promise(function(resolve,reject){
   console.log(2);
   resolve();
}).then(function(){console.log(3)
}).then(function(){console.log(4)});

process.nextTick(function(){console.log(5)});

console.log(6);
//输出2,6,5,3,4,1

这个例子就比较复杂了，这里要注意的一点在定义promise的时候，promise构造部分是同步执行的，这样问题就迎刃而解了。

首先分析Job queue的执行顺序：

script(主程序代码)——>process.nextTick——>promise——>setTimeout

I) 主体部分：定义promise的构造部分是同步的，
因此先输出2 ，主体部分再输出6（同步情况下，就是严格按照定义的先后顺序）

II)process.nextTick: 输出5

III）promise：这里的promise部分，严格的说其实是promise.then部分，输出的是3,4

IV) setTimeout ：最后输出1

综合的执行顺序就是： 2——>6——>5——>3——>4——>1

(3)更复杂的例子

setTimeout(function(){console.log(1)},0);

new Promise(function(resolve,reject){
   console.log(2);
   setTimeout(function(){resolve()},0)
}).then(function(){console.log(3)
}).then(function(){console.log(4)});

process.nextTick(function(){console.log(5)});

console.log(6);

//输出的是  2 6 5 1 3 4

这种情况跟我们（2）中的例子，区别在于promise的构造中，没有同步的resolve，因此promise.then在当前的执行队列中是不存在的，只有promise从pending转移到resolve，才会有then方法，而这个resolve是在一个setTimout时间中完成的，因此3,4最后输出。

知识点参考：

process.nextTick(callback)

process.nextTick()方法将 callback 添加到"next tick 队列"。一旦当前事件轮询队列的任务全部完成，在next tick队列中的所有callbacks会被依次调用。

这种方式不是setTimeout(fn, 0)的别名。它更加有效率。事件轮询随后的ticks 调用，会在任何I/O事件（包括定时器）之前运行。

每次事件轮询后，在额外的I/O执行前，next tick队列都会优先执行。递归调用nextTick callbacks 会阻塞任何I/O操作，就像一个while(true) 循环一样。

  function definitelyAsync(arg, cb) {
  if (arg) {
    process.nextTick(cb);
    return;
  }

  fs.stat("file", cb);  //涉及io操作
}
//这里process.nextTick就会阻塞io操作

服务器托管海外云主机出发点 setTimeout python 出发 javascript settimeout

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96611.html

Event Loop执行顺序

摘要：简要介绍谈谈在队列中的执行顺序问题的来源都不陌生，是指主线程从任务队列中循环读取任务，比如例输出在上述的例子中，我们明白首先执行主线程中的同步任务，当主线程任务执行完毕后，再从中读取任务，因此先输出，再输出。简要介绍：谈谈promise.resove,setTimeout,setImmediate,process.nextTick在EvenLoop队列中的执行顺序问题的来源 eve...

kk_miles 2019-08-23 12:34 评论0 收藏0
浏览器和Node中的事件循环机制

摘要：二浏览器端在讲解事件循环之前先谈谈中同步代码异步代码的执行流程。三端我自己认为的事件循环和浏览器端还是有点区别的，它的事件循环依靠引擎。四总结本篇主要介绍了浏览器和对于事件循环机制实现，由于能力水平有限，其中可能有误之处欢迎指出。一、前言前几天听公司一个公司三年的前端说今天又学到了一个知识点-微任务、宏任务，我问他这是什么东西，由于在吃饭他浅浅的说了下，当时没太理解就私下学习整理一...

KevinYan 2019-08-26 13:49 评论0 收藏0
js 执行机制事件循环

摘要：事件完成，回调函数进入。我们来分析一段较复杂的代码，看看你是否真的掌握了的执行机制第一轮事件循环流程分析如下整体作为第一个宏任务进入主线程，遇到，输出。宏任务微任务第三轮事件循环宏任务执行结束，执行两个微任务和。关于JavaScript 首先js是单线程的，执行任务肯定是一个接着一个。在最新的html5中提出了web-worker，但是JavaScript是单线程这一核心没有改变，一...

JackJiang 2019-08-21 18:35 评论0 收藏0
深入理解JavaScript运行机制

摘要：换句话说当一个异步过程调用发出后，调用者不会立刻得到结果，而是调用发出后，被调用者通过状态通知或回调函数处理这个调用。 JavaScript单线程机制 JavaScript的一个语言特性（也是这门语言的核心）就是单线程。什么是单线程呢？简单地说就是同一时间只能做一件事，当有多个任务时，只能按照一个顺序一个完成了再执行下一个为什么JS是单线程的呢？ JS最初被设计用在浏览器中，作为...

phodal 2019-08-22 13:55 评论0 收藏0
浏览器与NodeJS的EventLoop异同，以及部分机制。

摘要：浏览器与的异同，以及部分机制有人对部分迷惑，本身构造函数是同步的，是异步。浏览器的的已全部分析完成，过程中引用阮一峰博客，知乎，部分文章内容，侵删。浏览器与NodeJS的EventLoop异同，以及部分机制 PS：有人对promise部分迷惑，Promise本身构造函数是同步的，.then是异步。---- 2018/7/6 22：35修改 javascript 是一门单线程的脚本...

jubincn 2019-08-22 18:32 评论0 收藏0