用大白話告訴你什麼是Event Loop

不懂程式碼的攻城師發表於2019-01-09

文章原文地址

前沿

從前有座山,山裡有座廟,廟裡有個小和尚在講故事、講什麼呢?講的是:

從前有座山,山裡有座廟,廟裡有個小和尚在講故事、講什麼呢?講的是:

從前有座山,山裡有座廟,廟裡有個小和尚在講故事、講什麼呢?講的是:

請看一個小故事

image

以前有一個餐廳,這個餐廳有一個老闆和一個廚師,自己創業的,剛開始起步階段,沒有資金請員工,所以自己來當老闆兼服務員。

由於剛開業,所以會有一個充值優惠的活動,充了1000元超級VIP客戶,充了100元以上的是VIP客戶

所以來這家餐廳的顧客有這四種型別

  1. 家裡有礦的超級VIP客戶
  2. 充了錢的VIP客戶
  3. 普通的客戶
  4. 每次吃飯都帶著一群人來吃的客戶

作為VIP顧客,肯定得有VIP特權。

  • 優先上菜
  • 同等VIP,先點菜的先上菜

所以這個店的上菜順序跟身份和點菜的順序有關,

超級VIP客戶 > VIP客戶 > 普通客戶 > 一桌的客戶

這裡為什麼普通客戶會大於一桌的客戶呢?主要是因為炒一個人的菜比炒一桌人的菜快

一天、老闆開始營業後,陸陸續續的來了一些人進來點餐吃飯。

  • 第一個進來的是普通的客戶,點了一道回鍋肉

  • 第二個進來的是充了錢的VIP客戶,點了一道小龍蝦

  • 第三個進來的是一群人一起吃飯的客戶,點了很多菜

  • 第四個進來的是一個超級VIP客戶,點了一道酸菜魚

由於這個店只有一個人,所以老闆招待好他們點完餐之後就去炒菜了。根據上面提到的順序,所以會先炒超級VIP客戶點的菜、然後到VIP客戶點的菜、然後到普通客戶點的菜、最後到一桌的客戶點的菜

讓我們用虛擬碼看看如何實現這個邏輯

image

我們定義了四個function

  • superVipOrder(name, dish) 用來表示超級VIP使用者下單點菜
  • vipOrder(name, dish) 用來表示VIP使用者下單點菜
  • order(name, dish) 用來表示普通使用者下單點菜
  • groupOrder(name, dish) 用來表示一桌子客戶下單點菜

image

根據上面提到的上菜規則,

超級VIP客戶 > VIP客戶 > 普通客戶 > 一桌的客戶

實際的上菜順序我們可以知道是

image

那麼問題來了,那些function都是什麼呢?

其實很簡單,這些function都對應著JavaScript中的一些非同步函式

// 超級VIP客戶
// 微任務,將回撥加入到  執行佇列,優先執行
function superVipOrder(name, dish, order) {
  process.nextTick(() => {
    console.log(red(`superVip顧客 ${name} 點了 ${dish} 已經上了`));
  });
}
// VIP客戶
// 微任務,將回撥加入到  執行佇列,優先執行,優先順序比process.nextTick低
function vipOrder(name, dish, order) {
  new Promise((resolve, reject) => {
    resolve(true);
  }).then(() => {
    console.log(blue(`vip顧客 ${name} 點了 ${dish} 已經上了`));
  });
}
// 普通客戶下單
// 巨集任務,將回撥加入到 巨集任務的執行佇列中
function order(name, dish, order) {
  setTimeout(() => {
    console.log(yellow(`普通顧客 ${name} 點了 ${dish} 已經上了`));
  }, 0);
}
// 一桌的客戶
function groupOrder(name, dish, order) {
  setImmediate(() => {
    console.log(green(`一桌子顧客 ${name} 點了 ${dish} 已經上了`));
  });
}

我們可以暫且先把 process.nextTick 認為是超級vip使用者,優先順序最高、

原生Promise認為是vip使用者,執行優先順序高

setTimeout 認為是普通使用者,執行優先順序一般

setImmediate 認為是一群使用者,執行優先順序低

還原虛擬碼

我們將虛擬碼還原成這些非同步函式,這會讓我們看的更加直觀、親切一些
image

根據上面故事提到的優先順序規則,我們知道輸出的結果是這樣的

image

為什麼會是這樣的結果呢?下面就來講講JavaScript中的Event Loop

Event Loop

1. JavaScript的事件迴圈

image

我們知道 JavaScript是單執行緒的,就像上面故事的老闆,他得去服務員去招待客人點菜,並將選單給廚師,廚師炒好後再給到他去上菜。如果老闆不請個廚師,自己來炒菜的話,那麼在炒菜時就沒辦法接待客人,客人就會等待點菜。等著等著就會暴露出服務態度不行的問題。所以說,得有廚師專門處理炒菜的任務

所以在js中,任務分為同步任務和非同步任務,

  • 同步任務 -> 服務員去接待客人點菜
  • 非同步任務 -> 廚師炒菜、非同步回撥函式相當於 服務員去上菜

image

JS的事件迴圈如圖所示,

  1. 在執行主執行緒的任務時,如果有非同步任務,會進入到Event Table並註冊回撥函式,當指定的事情完成後,會將這個回撥函式放到 callback queue
  2. 在主執行緒執行完畢之後,會去讀取 callback queue中的回撥函式,進入主執行緒執行
  3. 不斷的重複這個過程,也就是常說的Event Loop(事件迴圈)了

2. 非同步任務

非同步任務又分為巨集任務跟微任務、他們之間的區別主要是執行順序的不同。

在js中,微任務有

  • 原生的Promise -> 其實就是我們上面提到的VIP使用者

  • process.nextTick -> 其實就是我們上面提到的超級VIP使用者

process.nextTick的執行優先順序高於Promise

巨集任務

  • 整體程式碼 script
  • setTimeout -> 其實就是我們上面提到的普通使用者
  • setImmediate -> 其實就是我們上面提到的群體使用者

setTimeout的執行優先順序高於 setImmediate

巨集任務與微任務的執行過程

在一次事件迴圈中,JS會首先執行 整體程式碼 script,執行完後會去判斷微任務佇列中是否有微任務,如果有,將它們逐一執行完後在一次執行巨集任務。如此流程

image

測試

下面我們來看一段程式碼是否瞭解了這個流程

<script>
    setTimeout(() => {
      console.log(`a`);
      new Promise( res => {
        res()
      }).then( () => {
        console.log(`c`);
      })
      process.nextTick(() => {
        console.log(`h`);
      })
    }, 0)
    console.log(`b`);
    
    process.nextTick( () => {
      console.log(`d`);
      process.nextTick(() => {
        console.log(`e`);
        process.nextTick(() => {
          console.log(`f`);
        })
      })
    })
    
    setImmediate( () => {
      console.log(`g`);
    })
</script>

執行結果為:b d e f a h c g

讓我們來分析一下這段程式碼的執行流程

  1. 首頁執行第一個巨集任務 整段script標籤程式碼,遇到第一個 setTimeout,將其回撥函式加入到巨集任務佇列中,

  2. 輸出 console.log(`b`)

  3. 遇到process.nextTick,將其回撥函式加入到任務

  4. 遇到setImmediate 將其回撥函式加入到巨集任務佇列中

巨集任務Event Queue 微任務Event Queue
setTimeout process.nextTick
setImmediate
  1. 當第一個巨集任務執行完後,就會去判斷是否還有任務,剛好有一個 任務,執行process.nextTick的回撥,輸出 console.log(`d`),然後又遇到了一個process.nextTick,又將其放入到任務佇列
  2. 繼續將任務佇列中的回撥函式取出,繼續執行,輸出 console.log(`e`),然後又遇到了一個process.nextTick,又將其放入到任務佇列
  3. 繼續將任務佇列中的回撥函式取出,繼續執行,輸出 console.log(`f`),然後又遇到了一個process.nextTick,又將其放入到任務佇列
巨集任務Event Queue 微任務Event Queue
setTimeout
setImmediate
  1. 當微任務佇列為空後,開始新的巨集任務,取出第一個巨集任務佇列的函式,setTimeout,執行 console.log(`a`),然後遇到Promiseprocess.nextTick 將其回撥加入到任務佇列。執行完後
巨集任務Event Queue 微任務Event Queue
setImmediate promise.then
process.nextTick
  1. 繼續判斷任務佇列是否有回撥函式可執行,由於process.nextTick的執行優先順序大於promise,所以會先執行process.nextTick的回撥,輸出 console.log(`h`);、如果有多個process.nextTick的回撥,會將process.nextTick的所有回撥執行完成後才會去執行其它任務的回撥。
    當nextTick所有的回撥執行完後,執行promise的回撥,輸出console.log(`c`);,直到promise的回撥佇列執行完後,又會去判斷是否還有任務。
巨集任務Event Queue 微任務Event Queue
setImmediate
  1. 微任務執行完後,開始執行新的巨集任務,執行setImmediate的回撥,輸出 console.log(`g`);

### 3. setImmediate
這裡為什麼要把 setImmediate 單獨拿出來說呢,因為它屬於巨集任務的範疇,但又有點不一樣的地方。

先看一段程式碼

image

按照我們上面的分析邏輯,我們會認為這段程式碼的輸出結果應該是a b c d
如果我們把使用Node 0.10.x的版本去執行這段程式碼,結果確實是輸出a b c d

然而,在Node 大於 4.x 的版本後,在執行setImmediate的,會使用while迴圈,把所有的immediate回撥取出來依次進行處理。

這也是我為什麼把 setImmediate 比喻成 一桌子人客戶的原因。

## 最後看一段程式碼看看自己是否真的掌握了

如果還沒有掌握,歡迎評論區吐槽

image

<script>
   console.log("start");
   process.nextTick(() => {
     console.log("a");
     setImmediate(() => {
       console.log("d");
     });
     new Promise(res => res()).then(() => {
       console.log("e");
       process.nextTick(() => {
         console.log("f");
       });
       new Promise(r => {
         r()
       })
       .then(() => {
         console.log("g");
       });
       setTimeout(() => {
         console.log("h");
       });
     });
   });
   
   setImmediate(() => {
     console.log("b");
     process.nextTick(() => {
       console.log("c");
     });
     new Promise(res => res()).then(() => {
       console.log("i");
     });
   });
   console.log("end");
</script>

輸出的結果為: start end a e g f h b d c i

簡單分析一下程式碼:

  1. 第一輪事件迴圈開始,執行script程式碼,輸出 start end,將process.nextTick 的回撥加入微任務佇列中,將setImmediate的回撥加入到巨集任務的佇列中
  2. 執行微任務佇列中的process.nextTick的回撥,輸出 a 、將setImmediate的回撥加入到巨集任務的佇列中,遇到promise、將回撥加入到任務佇列中。
巨集任務 微任務
setImmediate promise.then
setImmediate
  1. 繼續執行微任務佇列中的回撥,取出promise.then並執行,輸出e,將process.nextTick的回撥放入到微任務中,遇到promise、將回撥加入到任務佇列中。
  2. 判斷當前promise的回撥佇列是否還有回撥函式沒執行,如果有,將繼續執行,取出剛剛放入的promise的回撥,輸出 g,當Promise回撥佇列執行完後,繼續判斷當前是否還有微任務。
  3. 取出process.nextTick的回撥並執行,輸出g
巨集任務 微任務
setImmediate
setImmediate
setTimeout
  1. 當前微任務佇列為空後,開始執行巨集任務,因為setTimeout的優先順序大於setImmediate,所以先取出setTimeout的回撥並執行,輸出h
  2. 當前微任務佇列還是為空,開始執行巨集任務,取出所有setImmediate的回撥函式,並執行,輸出b d,將 process.nextpromise的回撥放入到微任務佇列中。
  3. 取出微任務佇列中的回撥函式,並執行,輸出 c i

總結

Event Loop 作為面試的高頻題,靜下心來認真的分析一下,其實不難理解。

歡迎關注

歡迎關注公眾號“碼上開發”,每天分享最新技術資訊

image

相關文章