Event Loop 問題研究

Q1:事件循環機制是什麼？
A1:JavaScript 是典型的單線程單併發語言，即表示在同一時間內其只能執行單個任務，同域瀏覽器中 JavaScript 主線程擁有一個函數調用棧(主線程)以及多個任務隊列。

Q2:什麼是任務？
A2:任務分爲兩種，一種是同步任務，一種是異步任務。
同步任務，就是主線程中排隊執行的任務；
異步任務，不先進入主線程，而是先進入“任務隊列”的任務，只有任務隊列通知了主線程，某個異步任務可以執行了，該任務纔會進入主線程執行

Q3:事件循環（Event Loop）的原理是什麼？
A3:首先，主線程會依次執行代碼。
當主線棧的函數調用棧爲空時，即會根據事件循環（Event Loop）機制來從任務隊列中提取出待執行的回調並執行。
執行的過程同樣會進行函數幀的入棧出棧操作。這樣不斷的循環往復，這就是事件循環（Event Loop）。
只要主線程空了，就會去讀取”任務隊列”，這就是JavaScript的運行機制

Q4:任務隊列中的任務有幾種？
A4:任務隊列中的任務分爲兩種：MacroTask (task) 和 MicroTask 。Event Loop 處理這兩種任務。

Q5:MacroTask (task) 和 MicroTask各包含什麼任務？
A5:

microtasks:

• process.nextTick
• promise
• Object.observe
• MutationObserver

macrotasks:

• setTimeout
• setInterval
• setImmediate
• I/O
• UI渲染

Q6:MacroTask和MicroTask的運行機制是什麼？
A6:事件循環的順序，決定了JavaScript代碼的執行順序。它從script(整體代碼)開始第一次循環。之後全局上下文進入函數調用棧。直到調用棧清空(只剩全局)，然後執行所有的microtask。當所有可執行的micro-task執行完畢之後。循環再次從macro-task開始，找到其中一個任務隊列執行完畢，然後再執行所有的micro-task，這樣一直循環下去。
一句話說，microtask將會被添加到任務隊列末尾進行處理。

MacroTask運行機制

MicroTask運行機制

Q7:來嘗試一道面試題

console.log('start')

const interval = setInterval(() => {  
  console.log('setInterval')
}, 0)

setTimeout(() => {  
  console.log('setTimeout 1')
  Promise.resolve()
      .then(() => {
        console.log('promise 3')
      })
      .then(() => {
        console.log('promise 4')
      })
      .then(() => {
        setTimeout(() => {
          console.log('setTimeout 2')
          Promise.resolve()
              .then(() => {
                console.log('promise 5')
              })
              .then(() => {
                console.log('promise 6')
              })
              .then(() => {
                clearInterval(interval)
              })
        }, 0)
      })
}, 0)

Promise.resolve()
    .then(() => {  
        console.log('promise 1')
    })
    .then(() => {
        console.log('promise 2')
    })

A7:start
promise 1
promise 2
setInterval
setTimeout 1
promise 3
promise 4
setInterval
setTimeout 2
promise 5
promise 6