编程语言
首页 > 编程语言> > JavaScript EventLoop

JavaScript EventLoop

作者:互联网

javascript 其本身是一门  单线程的  非阻塞的  脚本语言,单线程意味着,javascript代码在执行的任何时候,都只有一个主线程来处理所有的任务,非阻塞靠的就是 event loop(事件循环)

但是浏览器确实多线程的,所以才会可以打开多个标签页,从而打开不同的页面。

Event Loop它最主要是分三部分:主线程、宏任务队列(macrotask)、微任务队列(microtask)

js的任务队列分为同步任务异步任务,所有的同步任务都是在主线程里执行的,异步任务可能会在macrotask或者microtask里

 

 

 

 在事件循环中,每进行一次循环操作称为tick,tick 的任务处理模型是比较复杂的:分别是 Macrotask (宏任务)和 Microtask(微任务)。

主线程

其实就是进行 同步任务

宏任务队列(macrotask)包含:

setTimeout、setInterval、setImmediate、I/O、UI rendering

微任务队列(microtask)包含:

promise.then, MutaionObserver, process.nextTick(Node.js 环境)

 

执行顺序

1、先执行主线程,即同步任务

2、遇到宏任务队列(macrotask)放到宏任务队列(macrotask)

3、遇到微任务队列(microtask)放到微任务队列(microtask)

4、主线程执行完毕

5、执行微任务队列(microtask),微队任务列(micro task)执行完毕

6、执行一次宏任务队列(macro task)中的一个任务,执行完毕

7、执行微队列(micro task),执行完毕

8、依次循环。。。

 

规范:先同步,后异步, 先执行微观任务,再执行宏观任务

 

 

console.log('开始');

setTimeout(function () {

  console.log('setTimeout1');

});

new Promise(resolve => {

  console.log('Promise');

  resolve();

  setTimeout(() => console.log('setTimeout2'));

}).then(function () {
  
  console.log('Promise Then')

})

console.log('结束');

 

我们按照步骤来分析下:

1、遇到同步代码,先打印 “开始” 。
2、遇到setTimeout异步,放入队列,等待执行 。
3、中途遇到Promise函数,函数直接执行,打印 “Promise”。
4、遇到setTimeout ,属于异步,放入队列,等待执行。
5、遇到Promise的then等待成功返回,异步,放入队列。
6、遇到同步,打印 “结束”。
7、执行完,从头开始,将异步队列中的代码,按顺序执行。有一个微观任务,then后的,所以打印 “Promise Then”,再执行两个宏观任务 “setTimeout1” “setTimeout2”。

所以,打印的顺序为:开始、 Promise、 结束 、 Promise Then、 setTimeout1、 setTimeout2.

 

标签:异步,JavaScript,console,队列,EventLoop,任务,Promise,执行
来源: https://www.cnblogs.com/ningxin/p/15957941.html