Event Loop执行顺序

kk_miles 发布于2019-08-23 12:34 / 2464人阅读

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

简要介绍：谈谈promise.resove,setTimeout,setImmediate,process.nextTick在EvenLoop队列中的执行顺序

问题的来源

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任务的执行优先级是如何定义的。

执行顺序

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

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

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

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

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

script(主程序代码)[对应上方的a1],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

举例

(1) setTimeout和promise

例3:

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

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

console.log(1);

(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

(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

这些例子的原因请根据执行顺序执行判断，这里不一一解释了

专线服务云服务器 Event Loop 执行顺序执行顺序问逻辑执行顺序

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

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

一篇文章教会你Event loop——浏览器和Node

摘要：如果没到毫秒，那么阶段就会跳过，进入阶段，先执行的回调函数。参考文档什么是浏览器的事件循环不要混淆和浏览器中的定时器详解浏览器和不同的事件循环深入理解事件循环机制篇中的执行机制最近对Event loop比较感兴趣，所以了解了一下。但是发现整个Event loop尽管有很多篇文章，但是没有一篇可以看完就对它所有内容都了解的文章。大部分的文章都只阐述了浏览器或者Node二者之一，没有对比...

Leck1e 2019-08-22 15:33 评论0 收藏0
10分钟理解JS引擎的执行机制

摘要：深入理解引擎的执行机制灵魂三问为什么是单线程的为什么需要异步单线程又是如何实现异步的呢中的中的说说首先请牢记点是单线程语言的是的执行机制。深入理解JS引擎的执行机制 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.说说setTimeout 首先,请牢记2...

zzbo 2019-08-26 17:04 评论0 收藏0
浏览器与NodeJS的EventLoop异同，以及部分机制。

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

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

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

KaltZK 2019-08-05 14:20 评论0 收藏0
理解浏览器和node.js中的Event loop事件循环

摘要：浏览器和中并不一样，浏览器的是在中定义的规范，而中则由库实现。整个的这种运行机制又称为事件循环例子了解浏览器的后，查看下面例子，猜测浏览器是怎么输出的浏览器输出中的在内部有这样一个事件环机制。在启动时会初始化事件环。执行和中到期的。大家都知道，javascript是一门单线程语言，因此为了实现主线程的不阻塞，Event Loop这样的方案应运而生。浏览器和node中Event lo...

iliyaku 2019-08-22 15:47 评论0 收藏0