JS的Eventloop学习

一个前端小菜鸡QM
167 阅读5分钟

Eventloop学习笔记

简介

Event loop是一个执行模型

宏队列（macrotask或task）和微队列（microtask或jobs）

宏队列

一些异步任务的回调会依次进入macro task queue，等待后序被调用，异步任务包括了：

  • setTimeout
  • setInterval
  • setImmediate（Node独有）
  • requestAnimationFrame（浏览器独有）
  • I/O
  • UI rendering（浏览器独有）

微队列

另外一些异步任务的回调会依次进入micro task queue，等待后序被调用

  • process.nextTick（Node独有）
  • Promise
  • Object.observe
  • MutationObserver

浏览器的Event loop的完整流程（重要）

  1. 执行全局Script同步代码，这些同步代码有一些是同步语句，有一些是异步语句（比如setTimeout等）；
  2. 全局Script代码执行完毕后，调用栈Stack会清空；
  3. 从微队列microtask queue中取出位于队首的回调任务，放入调用栈Stack中执行，执行完后microtask queue长度减1；
  4. 继续取出位于队首的任务，放入调用栈Stack中执行，以此类推，直到直到把microtask queue中的所有任务都执行完毕。注意，如果在执行microtask的过程中，又产生了microtask，那么会加入到队列的末尾，也会在这个周期被调用执行；
  5. microtask queue中的所有任务都执行完毕，此时microtask queue为空队列，调用栈Stack也为空；
  6. 取出宏队列macrotask queue中位于队首的任务，放入Stack中执行；
  7. 执行完毕后，调用栈Stack为空；
  8. 重复第3-7个步骤；
  9. ......

注意：宏队列每次只执行一个任务，微队列是在微队列里面的任务全部完成才算完成一次

console.log(1);

setTimeout(() => {
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3)
  });
});

new Promise((resolve, reject) => {
  console.log(4)
  resolve(5)
}).then((data) => {
  console.log(data);
  
  Promise.resolve().then(() => {
    console.log(6)
  }).then(() => {
    console.log(7)
    
    setTimeout(() => {
      console.log(8)
    }, 0);
  });
})

setTimeout(() => {
  console.log(9);
})

console.log(10);

/*
1
4
10
5
6
7
2
3
8
9
*/

在执行微队列过程中产生新的微任务，就会把微任务添加到微队列的末端并在这个周期执行，直到微队列为空才停止（ NodeJS中的微任务process.nextTick()来说，它的上限是1000个 ）

NodeJS的Event loop

流程（重要）

  • timers阶段：这个阶段执行setTimeout和setInterval预定的callback
  • I/O callback阶段：执行除了close事件的callbacks、被timers设定的callbacks、setImmediate()设定的callbacks这些之外的callbacks
  • idle, prepare阶段：仅node内部使用
  • poll阶段：获取新的I/O事件，适当的条件下node将阻塞在这里
  • check阶段：执行setImmediate()设定的callbacks
  • close callbacks阶段：执行socket.on('close', ....)这些callbacks

NodeJS里面有4个macrotask queue（宏队列）

  1. Timers Queue
  2. IO Callbacks Queue
  3. Check Queue
  4. Close Callbacks Queue

在浏览器里面可以认为只有一个宏队列，所有的宏任务都在同一个宏队列之中，而NodeJS中，不同的宏任务会被放置在不同的宏队列。

NodeJS中的微队列

主要有：

  1. Next Tick Queue：放置process.nextTick(callback)的回调任务的

  2. Other Micro Queue：放置其他microtask，比如Promise等

在浏览器中可以认为只有一个微队列，所有的microtask都会添加到这个微队列之中。而NodeJS中，不同的microtask会被放置在不同微队列之中。

执行流程

  1. 执行全局Script的同步代码
  2. 执行microtask微任务，先执行所有Next Tick Queue中的所有任务，再执行Other Microtask Queue中所有任务
  3. 开始执行macrotask宏任务，共6个阶段（上面的6个流程），从第一个阶段开始执行相应每一个阶段macrotask中的所有任务（所有每个阶段宏任务队列的所有任务），每一个阶段的macrotask任务执行完毕后，开始执行微任务，也就是步骤2
  4. Timers Queue->步骤2->I/O Queue->步骤2->Check Queue->步骤2->Close Callback Queue->步骤2->Timers Queue

注意：宏队列中又产生新的宏任务时，不进行执行，等到下一次队列开始再执行；如果setTimeout有限制时间的话，那么如果执行到Timer Queue还没回调，只能等到下一次执行了，否则就把它的回调注册到Timer Queue。

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})

new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})
process.nextTick(function() {
  console.log('6');
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})
/* 正确答案
1
7
6
8
2
4
9
11
3
10
5
12
*/

执行到微任务阶段时，先执行Next Tick Queue中的所有任务，再执行Other Microtask Queue中的所有任务，然后才会进入下一个阶段的宏任务

setTimeout 与 setImmediate 对比

  • setTimeout(fn, 0)在Timers阶段执行，并且是在poll阶段(获取新的I/O事件)进行判断是否达到指定的timer时间才会执行
  • setImmediate(fn)在Check阶段执行
执行顺序
  • 如果两者都在主模块(main module)调用，那么执行先后取决于进程性能，顺序随机
  • 如果两者都不在主模块调用，即在一个I/O Circle中调用，那么setImmediate的回调永远先执行，因为会先到Check阶段
setImmediate 与 process.nextTick 对比

  • setImmediate(fn)的回调任务会插入到宏队列Check Queue中

  • process.nextTick(fn)的回调任务会插入到微队列Next Tick Queue中

  • process.nextTick(fn)调用深度有限制，上限是1000，而setImmedaite则没有

    浏览器：

NodeJS：

参考资料： segmentfault.com/a/119000001…

avatar
文章
阅读
粉丝