Node-js-執行順序初探

Concept

eventloop 概覽

┌───────────────────────────┐
┌─>│           timers          │    (this phase executes callbacks scheduled by setTimeout() and setInterval())
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │     pending callbacks     │    (executes I/O callbacks deferred to the next loop iteration.)
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │       idle, prepare       │    (only used internally)
│  └─────────────┬─────────────┘      ┌───────────────┐
│  ┌─────────────┴─────────────┐      │   incoming:   │
│  │           poll            │<─────┤  connections, │ (retrieve new I/O events; execute I/O related callbacks)
│  └─────────────┬─────────────┘      │   data, etc.  │
│  ┌─────────────┴─────────────┐      └───────────────┘
│  │           check           │    (setImmediate() callbacks are invoked here)
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
└──┤      close callbacks      │    (some close callbacks, e.g. socket.on('close', ...))
   └───────────────────────────┘

詳情請參考 https://nodejs.org/en/docs/gu...

Macrotask and Microtask

參考 https://stackoverflow.com/que...:

eventloop的一次循環，會從 macrotask queue取出一個任務, 任務完成後，全部 microtask queue的微任務都會被處理完，而後繼續從 macrotask queue取任務……微任務在被處理的過程當中能夠建立其餘的微任務，而且這些微任務也會被加入 microtask queue並被一一執行。

如上所述，若是一個微任務不斷建立新的微任務，則可能會對其餘宏任務形成「飢餓」現象，由於微任務隊列很難被清空。

Examples:
macrotasks: setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering
microtasks: process.nextTick, Promises, Object.observe, MutationObserver

Example

JS code

console.log('main thread start ...');
setTimeout(() => console.log('Timeout1'), 0);   // Macro task queue
let promiseF = () => new Promise(resolve => setTimeout(() => resolve('Timeout3'), 0));
let asyncF = async () => console.log(await promiseF());
asyncF();   // For async will wrap the result with promise, "console.log(await promiseF())"" enters Micro task

let p1 = Promise.resolve('p1');
let p2 = Promise.resolve('p2');

p1.then(r => {
    console.log(r); // p1
    setTimeout(() => console.log('Timeout2'), 0);   // Macro task queue
    const p3 = Promise.resolve('p3');
    p3.then(console.log);   // p3
}); // Micro task queue

p2.then(console.log);   // p2
setTimeout(() => console.log('Timeout4'), 0); // Macro task
console.log('main thread end.');

上面程序運行的結果以下：

main thread start ...
main thread end.
p1
p2
p3
Timeout1
Timeout4
Timeout2
Timeout3

執行順序

• 同步代碼

  1. 執行 console.log('main thread start ...');,而後打印日誌 main thread start ....
  2. 將 () => console.log('Timeout1') 這個回調任務加入macrotask queue.
  3. 調用 asyncF() 函數, 由於該函數是async function, 它會將 console.log(await promiseF())包裹爲promise, 能夠把它看成promise.then(...), 所以console.log(await promiseF()) 將會加入到 microtask queue.
  4. p1.then(...) 和 p2.then(...) 也會加入到 microtask queue.
  5. 將 () => console.log('Timeout4') 回調函數加入到macrotask queue.
  6. 執行 console.log('main thread end.');, 而後打印 main thread end..

上面的操做完成後, Macrotask queue 與 Microtask queue 將會變成這樣:

Macrotask queue                           Microtask queue

┌─────────────────────────┐           ┌───────────────────────────────────┐
| console.log('Timeout1') |           |   console.log(await promiseF())   |
└─────────────────────────┘           └───────────────────────────────────┘
| console.log('Timeout4') |           |           p1.then(...)            |
└─────────────────────────┘           └───────────────────────────────────┘
                                      |           p2.then(...)            |
                                      └───────────────────────────────────┘

• 處理microtask隊列

  1. 按照先進先出的原則， 首先處理 console.log(await promiseF()), 咱們能夠將 await 看成一個microtask, 所以microtask隊列看起來以下:

     Microtask queue
     
     ┌────────────────────────────────────────────┐
     |                  p1.then(...)              |
     └────────────────────────────────────────────┘
     |                  p2.then(...)              |
     └────────────────────────────────────────────┘
     |  setTimeout(() => resolve('Timeout3'), 0)  |
     └────────────────────────────────────────────┘

  2. 處理 p1.then(...), 打印"p1", 將console.log('Timeout2') 加入到 macrotask queue, 將 p3.then(...) 加入到 microtask queue.

     Macrotask queue                                 Microtask queue
     
     ┌─────────────────────────┐           ┌────────────────────────────────────────────┐
     | console.log('Timeout1') |           |                  p2.then(...)              |
     └─────────────────────────┘           └────────────────────────────────────────────┘
     | console.log('Timeout4') |           |  setTimeout(() => resolve('Timeout3'), 0)  |
     └─────────────────────────┘           └────────────────────────────────────────────┘
     | console.log('Timeout2') |           |                  p3.then(...)              |
     └─────────────────────────┘           └────────────────────────────────────────────┘

  3. 處理 p2.then(...) , 打印 p2, 而後執行 setTimeout(() => resolve('Timeout3'), 0), 將 resolve('Timeout3') 加入 macrotask queue, 而後打印p3.

     Macrotask queue
     
     ┌─────────────────────────┐
     | console.log('Timeout1') |
     └─────────────────────────┘
     | console.log('Timeout4') |
     └─────────────────────────┘
     | console.log('Timeout2') |
     └─────────────────────────┘
     |   resolve('Timeout3')   |
     └─────────────────────────┘

  4. 最後清空全部macrotask queue（即處理完全部宏任務）。

所以，最終的打印結果是

main thread start ...
main thread end.
p1
p2
p3
Timeout1
Timeout4
Timeout2
Timeout3