【JS】事件回圈機制（Event Loop）

單執行緒

什么是單執行緒？

• 就是行程只有一個執行緒，單執行緒在程式執行時，所走的程式路徑按照連續順序排下來，前面的必須處理好，后面的才會執行，

單執行緒處理的優點：

• 同步應用程式的開發比較容易，但由于需要在上一個任務完成后才能開始新的任務，所以其效率通常比多執行緒應用程式低，如果完成同步任務所用的時間比預計時間長，應用程式可能會不回應

• JavaScript語言的一大特點就是單執行緒：同一個時間只能做一件事，可以提高效率，

JavaScript的單執行緒，與它的用途有關，

• 作為瀏覽器腳本語言，JavaScript的主要用途是與用戶互動，以及操作DOM，這決定了它只能是單執行緒，否則會帶來很復雜的同步問題，
• 比如，假定JavaScript同時有兩個執行緒，一個執行緒在某個DOM節點上添加內容，另一個執行緒洗掉了這個節點，這時瀏覽器應該以哪個執行緒為準？
• 所以，為了避免復雜性，從一誕生，JavaScript就是單執行緒，這已經成了這門語言的核心特征，將來也不會改變，

• 為了利用多核CPU的計算能力，HTML5提出Web Worker標準：
• 允許JavaScript腳本創建多個執行緒，但是子執行緒完全受主執行緒控制，且不得操作DOM，
• 所以，這個新標準并沒有改變JavaScript單執行緒的本質，

任務佇列

單執行緒就意味著，所有任務需要排隊，前一個任務結束，才會執行后一個任務，如果前一個任務耗時很長，后一個任務就不得不一直等著，

如果排隊是因為計算量大，CPU忙不過來，倒也算了，但是很多時候CPU是閑著的，因為IO設備（輸入輸出設備）很慢（比如Ajax操作從網路讀取資料），不得不等著結果出來，再往下執行，

JavaScript語言的設計者意識到，這時主執行緒完全可以不管IO設備，掛起處于等待中的任務，先運行排在后面的任務，等到IO設備回傳了結果，再回過頭，把掛起的任務繼續執行下去

• 所有任務可以分成兩種，

1. 同步任務（synchronous）:
	在主執行緒上排隊執行的任務，只有前一個任務執行完畢，才能執行后一個任務
2. 異步任務（asynchronous）:
	不進入主執行緒、而進入"任務佇列"（task queue）的任務，只有"任務佇列"通知主執行緒，某個異步任務可以執行了，該任務才會進入主執行緒執行，

• 異步執行的運行機制如下：

（1）所有同步任務都在主執行緒上執行，形成一個執行堆疊（execution context stack），

（2）主執行緒之外，還存在一個"任務佇列"（task queue），只要異步任務有了運行結果，就在"任務佇列"之中放置一個事件，

（3）一旦"執行堆疊"中的所有同步任務執行完畢，系統就會讀取"任務佇列"，看看里面有哪些事件，那些對應的異步任務，于是結束等待狀態，進入執行堆疊，開始執行，

（4）主執行緒不斷重復上面的第三步，
只要主執行緒空了，就會去讀取"任務佇列"，這就是JavaScript的運行機制，這個程序會不斷重復，

• 堆疊先進后出，佇列先進先出

事件和回呼函式

"任務佇列"是一個事件的佇列（也可以理解成訊息的佇列），IO設備完成一項任務，就在"任務佇列"中添加一個事件，表示相關的異步任務可以進入"執行堆疊"了，

• 主執行緒讀取"任務佇列"，就是讀取里面有哪些事件，

事件：
	除了IO設備的事件以外，還包括一些用戶產生的事件（比如滑鼠點擊、頁面滾動等等），
	只要指定過回呼函式，這些事件發生時就會進入"任務佇列"，等待主執行緒讀取，
回呼函式：
	就是那些會被主執行緒掛起來的代碼，
	異步任務必須指定回呼函式，當主執行緒開始執行異步任務，就是執行對應的回呼函式，

• "任務佇列"是一個先進先出的資料結構，排在前面的事件，優先被主執行緒讀取，
• 主執行緒的讀取程序基本上是自動的，只要執行堆疊一清空，"任務佇列"上第一位的事件就自動進入主執行緒，
• 但是由于存在"定時器"功能，主執行緒首先要檢查一下執行時間，某些事件只有到了規定的時間，才能回傳主執行緒，

事件回圈機制

主執行緒從"任務佇列"中讀取事件，這個程序是回圈不斷的，所以整個的這種運行機制又稱為 Event Loop（事件回圈），

主執行緒運行的時候，產生堆（heap）和堆疊（stack），堆疊中的代碼呼叫各種外部API，它們在"任務佇列"中加入各種事件（click，load，done），

只要堆疊中的代碼執行完畢，主執行緒就會去讀取"任務佇列"，依次執行那些事件所對應的回呼函式，

執行堆疊中的代碼（同步任務），總是在讀取"任務佇列"（異步任務）之前執行，

定時器（setTimeout）

除了放置異步任務的事件，“任務佇列"還可以放置定時事件，即指定某些代碼在多少時間之后執行，這叫做"定時器”（timer）功能，也就是定時執行的代碼，

• 將setTimeout()中的代碼推遲到1000毫秒之后執行

console.log(1);
setTimeout(function(){console.log(2);},1000);
console.log(3);
// 執行順序為：1，3，2

-如果將setTimeout()的第二個引數設為0，就表示當前代碼執行完（執行堆疊清空）以后，立即執行（0毫秒間隔）指定的回呼函式，

console.log(1);
setTimeout(function(){console.log(2);},0);
console.log(3);
// 執行順序為：1，3，2

• 分析：

setTimeout(fn,0)的含義是，指定某個任務在主執行緒最早可得的空閑時間執行，也就是說，盡可能早得執行，

它在"任務佇列"的尾部添加一個事件，因此要等到同步任務和"任務佇列"現有的事件都處理完，才會得到執行，

setTimeout()只是將事件插入了"任務佇列"，必須等到當前代碼（執行堆疊）執行完，主執行緒才會去執行它指定的回呼函式，

要是當前代碼耗時很長，有可能要等很久，所以并沒有辦法保證，回呼函式一定會在 setTimeout()指定的時間執行，

宏任務(macro-task)、微任務(micro-task)

JavaScript 單執行緒中的 異步任務 可以細分為 宏任務(macro-task) 和 微任務(micro-task)，
ES6 規范中，microtask 稱為 jobs，macrotask 稱為 task，宏任務是由宿主（Node、瀏覽器）發起的，而微任務由JavaScript自身發起，

• 宏任務macro-task包括：

script(整體代碼), 
setTimeout, 
setInterval, 
setImmediate, 
I/O, 
UI rendering，

• 微任務micro-task包括：

process.nextTick,
Promises, 
Object.observe, 
MutationObserver，

• 事件回圈中：每進行一次回圈操作稱為tick

1. 執行一個宏任務（堆疊中沒有就從事件佇列中獲取）
2. 執行程序中如果遇到微任務，就將它添加到微任務的任務佇列中
3. 宏任務執行完畢后，立即執行當前微任務佇列中的所有微任務（依次執行）
4. 當前宏任務執行完畢，開始檢查渲染，然后GUI執行緒接管渲染
5. 渲染完畢后，JS執行緒繼續接管，開始下一個宏任務（從事件佇列中獲取）

• 以宏任務中的 setTimeout 和 微任務中的 Promise 為例

第一次事件回圈中：JavaScript 引擎會把整個 script 代碼當成一個宏任務執行

• 執行完宏任務之后，再檢測本次回圈中是否尋在微任務，存在的話就依次從微任務的任務佇列中讀取執行完所有的微任務，
• 再讀取宏任務的任務佇列中的任務執行，再執行所有的微任務，如此回圈，

JS 的執行順序：就是每次事件回圈中的 宏任務 — 微任務 ，

console.log(1);
setTimeout(function() {
    console.log(2);
})
var promise = new Promise(function(resolve, reject) {
    console.log(3);
    resolve();
})
promise.then(function() {
    console.log(4);
})
console.log(5);

• 分析

1. 上面的示例中，第一次事件回圈，整段代碼作為宏任務進入主執行緒執行，
2. 遇到了 setTimeout ，就會等到過了指定的時間后將回呼函式放入到宏任務的任務佇列中，
3. 遇到 Promise，將 then 函式放入到微任務的任務佇列中，
4. 整個事件回圈完成之后，會去檢測微任務的任務佇列中是否存在任務，存在就執行，
5. 第一次的回圈結果列印為: 1,3,5,4，

6. 接著再到宏任務的任務佇列中按順序取出一個宏任務到堆疊中讓主執行緒執行，那么在這次回圈中的宏任務就是 setTimeout 注冊的回呼函式，執行完這個回呼函式，發現在這次回圈中并不存在微任務，就準備進行下一次事件回圈，
7. 檢測到宏任務佇列中已經沒有了要執行的任務，那么就結束事件回圈，
8. 最終的結果就是 1,3,5,4,2，

• 示例 2

console.log(1);

setTimeout(function() {
  console.log(2);
}, 0);

Promise.resolve().then(function() {
  console.log(3);
}).then(function() {
  console.log(4);
});

console.log(5);

• 分析

1. 整體 script 作為第一個宏任務進入主執行緒，遇到 console.log，輸出 1
2. 遇到 setTimeout，其回呼函式被分發到宏任務 Event Queue 中
3. 遇到 Promise，其 then函式被分到到微任務 Event Queue 中,記為 then1，之后又4. 遇到了 then 函式，將其分到微任務 Event Queue 中，記為 then2
5. 遇到 console.log，輸出 5
6. 執行微任務，首先執行then1，輸出 3, 然后執行 then2，輸出 4，這樣就清空了所有微任務
7. 執行 setTimeout 任務，輸出 2
8. 最終的結果就是 1, 5, 3, 4, 2

• 示例 3：

console.log(1);

// 'timeout1'
setTimeout(function() {
  console.log(2);
}, 10);

new Promise(resolve => {
    console.log(3);
    resolve();
    // 'timeout2'
    setTimeout(() => console.log(4), 10);
}).then(function() {
    console.log(5)
})

console.log(6);

• 分析：

事件回圈從宏任務 (macro-task) 佇列開始，最初始，宏任務佇列中，只有一個 scrip t(整體代碼)任務；
當遇到任務源 (task source) 時，則會先分發任務到對應的任務佇列中去，

1. 首先遇到了console.log，輸出 1； 
2. 接著往下走，遇到 setTimeout 任務源，將其分發到任務佇列中去，記為 timeout1； 
接著遇到 Promise，new Promise 中的代碼立即執行，輸出 3, 
3. 然后執行 resolve() ,遇到 setTimeout ,將其分發到任務佇列中去，記為 timemout2,
4. 將其 then 分發到微任務佇列中去，記為 then1； 
6. 接著遇到 console.log 代碼，直接輸出 6
7. 接著檢查微任務佇列，發現有個 then1 微任務，執行，輸出 5 再檢查微任務佇列，發現已經清空，則開始檢查宏任務佇列，
8. 執行 timeout1,輸出 2； 接著執行 timeout2，輸出 4 至此，所有的都佇列都已清空，執行完畢，
9. 其輸出的順序依次是：1, 3, 6, 5, 2, 4