前端基礎進階（十二）：深入核心，詳解事件循環機制

JavaScript的學習零散而龐雜，因此很多時候我們學到了一些東西，但是卻沒辦法感受到自己的進步，甚至過了不久，就把學到的東西給忘了。爲了解決自己的這個困擾，在學習的過程中，我一直試圖在尋找一條核心的線索，只要我根據這條線索，我就能夠一點一點的進步。

前端基礎進階正是圍繞這條線索慢慢展開，而事件循環機制(Event Loop)，則是這條線索的最關鍵的知識點。所以，我就馬不停蹄的去深入的學習了事件循環機制，並總結出了這篇文章跟大家分享。

事件循環機制從整體上的告訴了我們所寫的JavaScript代碼的執行順序。但是在我學習的過程中，找到的許多國內博客文章對於它的講解淺嘗輒止，不得其法，很多文章在圖中畫個圈就表示循環了，看了之後也沒感覺明白了多少。但是他又如此重要，以致於當我們想要面試中高級崗位時，事件循環機制總是繞不開的話題。特別是ES6中正式加入了Promise對象之後，對於新標準中事件循環機制的理解就變得更加重要。這就很尷尬了。

最近有兩篇比較火的文章也表達了這個問題的重要性。

這個前端面試在搞事 https://zhuanlan.zhihu.com/p/25407758
80% 應聘者都不及格的 JS 面試題 https://juejin.im/post/58cf180b0ce4630057d6727c

但是很遺憾的是，大神們告訴了大家這個知識點很重要，卻並沒有告訴大家爲什麼會這樣。所以當我們在面試時遇到這樣的問題時，就算你知道了結果，面試官再進一步問一下，我們依然懵逼。

在學習事件循環機制之前，我默認你已經懂得了如下概念，如果仍然有疑問，可以回過頭去看看我以前的文章。

執行上下文(Execution context)
函數調用棧(call stack)
隊列數據結構(queue)
Promise(我會在下一篇文章專門總結Promise的詳細使用)

因爲chrome瀏覽器中新標準中的事件循環機制與nodejs類似，因此此處就整合nodejs一起來理解，其中會介紹到幾個nodejs有，但是瀏覽器中沒有的API，大家只需要瞭解就好，不一定非要知道她是如何使用。比如process.nextTick，setImmediate

OK，那我就先拋出結論，然後以例子與圖示詳細給大家演示事件循環機制。

我們知道JavaScript的一大特點就是單線程，而這個線程中擁有唯一的一個事件循環。

當然新標準中的web worker涉及到了多線程，我對它瞭解也不多，這裏就不討論了。

JavaScript代碼的執行過程中，除了依靠函數調用棧來搞定函數的執行順序外，還依靠任務隊列(task
queue)來搞定另外一些代碼的執行。

隊列數據結構
一個線程中，事件循環是唯一的，但是任務隊列可以擁有多個。
任務隊列又分爲macro-task（宏任務）與micro-task（微任務），在最新標準中，它們被分別稱爲task與jobs。
macro-task大概包括：script(整體代碼), setTimeout, setInterval, setImmediate,
I/O, UI rendering。
micro-task大概包括: process.nextTick, Promise, Object.observe(已廢棄),
MutationObserver(html5新特性)
setTimeout/Promise等我們稱之爲任務源。而進入任務隊列的是他們指定的具體執行任務。

// setTimeout中的回調函數纔是進入任務隊列的任務 
setTimeout(function() {
    console.log('xxxx');
     }) 
  // 非常多的同學對於setTimeout的理解存在偏差。所以大概說一下誤解： 
  // setTimeout作爲一個任務分發器，這個函數會立即執行，而它所要分發的任務，也就是它的第一個參數，纔是延遲執行

來自不同任務源的任務會進入到不同的任務隊列。其中setTimeout與setInterval是同源的。
事件循環的順序，決定了JavaScript代碼的執行順序。它從script(整體代碼)開始第一次循環。之後全局上下文進入函數調用棧。直到調用棧清空(只剩全局)，然後執行所有的micro-task。當所有可執行的micro-task執行完畢之後。循環再次從macro-task開始，找到其中一個任務隊列執行完畢，然後再執行所有的micro-task，這樣一直循環下去。
其中每一個任務的執行，無論是macro-task還是micro-task，都是藉助函數調用棧來完成。

純文字表述確實有點乾澀，因此，這裏我們通過2個例子，來逐步理解事件循環的具體順序。

// demo01  出自於上面我引用文章的一個例子，我們來根據上面的結論，一步一步分析具體的執行過程。
// 爲了方便理解，我以打印出來的字符作爲當前的任務名稱
setTimeout(function() {
    console.log('timeout1');
})

new Promise(function(resolve) {
    console.log('promise1');
    for(var i = 0; i < 1000; i++) {
        i == 99 && resolve();
    }
    console.log('promise2');
}).then(function() {
    console.log('then1');
})

console.log('global1');

首先，事件循環從宏任務隊列開始，這個時候，宏任務隊列中，只有一個script(整體代碼)任務。每一個任務的執行順序，都依靠函數調用棧來搞定，而當遇到任務源時，則會先分發任務到對應的隊列中去，所以，上面例子的第一步執行如下圖所示。

首先script任務開始執行，全局上下文入棧

第二步：script任務執行時首先遇到了setTimeout，setTimeout爲一個宏任務源，那麼他的作用就是將任務分發到它對應的隊列中。

setTimeout(function() {
    console.log('timeout1');
})

宏任務timeout1進入setTimeout隊列

第三步：script執行時遇到Promise實例。Promise構造函數中的第一個參數，是在new的時候執行，因此不會進入任何其他的隊列，而是直接在當前任務直接執行了，而後續的.then則會被分發到micro-task的Promise隊列中去。

因此，構造函數執行時，裏面的參數進入函數調用棧執行。for循環不會進入任何隊列，因此代碼會依次執行，所以這裏的promise1和promise2會依次輸出。

promise1入棧執行，這時promise1被最先輸出

resolve在for循環中入棧執行

構造函數執行完畢的過程中，resolve執行完畢出棧，promise2輸出，promise1頁出棧，then執行時，Promise任務then1進入對應隊列

script任務繼續往下執行，最後只有一句輸出了globa1，然後，全局任務就執行完畢了。

第四步：第一個宏任務script執行完畢之後，就開始執行所有的可執行的微任務。這個時候，微任務中，只有Promise隊列中的一個任務then1，因此直接執行就行了，執行結果輸出then1，當然，他的執行，也是進入函數調用棧中執行的。

執行所有的微任務

第五步：當所有的micro-tast執行完畢之後，表示第一輪的循環就結束了。這個時候就得開始第二輪的循環。第二輪循環仍然從宏任務macro-task開始。

微任務被清空

這個時候，我們發現宏任務中，只有在setTimeout隊列中還要一個timeout1的任務等待執行。因此就直接執行即可。

timeout1入棧執行

這個時候宏任務隊列與微任務隊列中都沒有任務了，所以代碼就不會再輸出其他東西了。

那麼上面這個例子的輸出結果就顯而易見。大家可以自行嘗試體會。

這個例子比較簡答，涉及到的隊列任務並不多，因此讀懂了它還不能全面的瞭解到事件循環機制的全貌。所以我下面弄了一個複雜一點的例子，再給大家解析一番，相信讀懂之後，事件循環這個問題，再面試中再次被問到就難不倒大家了。

// demo02
console.log('golb1');

setTimeout(function() {
    console.log('timeout1');
    process.nextTick(function() {
        console.log('timeout1_nextTick');
    })
    new Promise(function(resolve) {
        console.log('timeout1_promise');
        resolve();
    }).then(function() {
        console.log('timeout1_then')
    })
})

setImmediate(function() {
    console.log('immediate1');
    process.nextTick(function() {
        console.log('immediate1_nextTick');
    })
    new Promise(function(resolve) {
        console.log('immediate1_promise');
        resolve();
    }).then(function() {
        console.log('immediate1_then')
    })
})

process.nextTick(function() {
    console.log('glob1_nextTick');
})
new Promise(function(resolve) {
    console.log('glob1_promise');
    resolve();
}).then(function() {
    console.log('glob1_then')
})

setTimeout(function() {
    console.log('timeout2');
    process.nextTick(function() {
        console.log('timeout2_nextTick');
    })
    new Promise(function(resolve) {
        console.log('timeout2_promise');
        resolve();
    }).then(function() {
        console.log('timeout2_then')
    })
})

process.nextTick(function() {
    console.log('glob2_nextTick');
})
new Promise(function(resolve) {
    console.log('glob2_promise');
    resolve();
}).then(function() {
    console.log('glob2_then')
})

setImmediate(function() {
    console.log('immediate2');
    process.nextTick(function() {
        console.log('immediate2_nextTick');
    })
    new Promise(function(resolve) {
        console.log('immediate2_promise');
        resolve();
    }).then(function() {
        console.log('immediate2_then')
    })
})

這個例子看上去有點複雜，亂七八糟的代碼一大堆，不過不用擔心，我們一步一步來分析一下。

第一步：宏任務script首先執行。全局入棧。glob1輸出。

script首先執行

第二步，執行過程遇到setTimeout。setTimeout作爲任務分發器，將任務分發到對應的宏任務隊列中。

setTimeout(function() {
    console.log('timeout1');
    process.nextTick(function() {
        console.log('timeout1_nextTick');
    })
    new Promise(function(resolve) {
        console.log('timeout1_promise');
        resolve();
    }).then(function() {
        console.log('timeout1_then')
    })
})

timeout1進入對應隊列

第三步：執行過程遇到setImmediate。setImmediate也是一個宏任務分發器，將任務分發到對應的任務隊列中。setImmediate的任務隊列會在setTimeout隊列的後面執行。

setImmediate(function() {
    console.log('immediate1');
    process.nextTick(function() {
        console.log('immediate1_nextTick');
    })
    new Promise(function(resolve) {
        console.log('immediate1_promise');
        resolve();
    }).then(function() {
        console.log('immediate1_then')
    })
})

進入setImmediate隊列

第四步：執行遇到nextTick，process.nextTick是一個微任務分發器，它會將任務分發到對應的微任務隊列中去。

process.nextTick(function() {
    console.log('glob1_nextTick');
})

nextTick

第五步：執行遇到Promise。Promise的then方法會將任務分發到對應的微任務隊列中，但是它構造函數中的方法會直接執行。因此，glob1_promise會第二個輸出。

new Promise(function(resolve) {
    console.log('glob1_promise');
    resolve();
}).then(function() {
    console.log('glob1_then')
})

先是函數調用棧的變化

然後glob1_then任務進入隊列

第六步：執行遇到第二個setTimeout。

setTimeout(function() {
    console.log('timeout2');
    process.nextTick(function() {
        console.log('timeout2_nextTick');
    })
    new Promise(function(resolve) {
        console.log('timeout2_promise');
        resolve();
    }).then(function() {
        console.log('timeout2_then')
    })
})

timeout2進入對應隊列

第七步：先後遇到nextTick與Promise

process.nextTick(function() {
    console.log('glob2_nextTick');
})
new Promise(function(resolve) {
    console.log('glob2_promise');
    resolve();
}).then(function() {
    console.log('glob2_then')
})

glob2_nextTick與Promise任務分別進入各自的隊列

第八步：再次遇到setImmediate。

setImmediate(function() {
    console.log('immediate2');
    process.nextTick(function() {
        console.log('immediate2_nextTick');
    })
    new Promise(function(resolve) {
        console.log('immediate2_promise');
        resolve();
    }).then(function() {
        console.log('immediate2_then')
    })
})

nextTick

這個時候，script中的代碼就執行完畢了，執行過程中，遇到不同的任務分發器，就將任務分發到各自對應的隊列中去。接下來，將會執行所有的微任務隊列中的任務。

其中，nextTick隊列會比Promie先執行。nextTick中的可執行任務執行完畢之後，纔會開始執行Promise隊列中的任務。

當所有可執行的微任務執行完畢之後，這一輪循環就表示結束了。下一輪循環繼續從宏任務隊列開始執行。

這個時候，script已經執行完畢，所以就從setTimeout隊列開始執行。

第二輪循環初始狀態

setTimeout任務的執行，也依然是藉助函數調用棧來完成，並且遇到任務分發器的時候也會將任務分發到對應的隊列中去。

只有當setTimeout中所有的任務執行完畢之後，纔會再次開始執行微任務隊列。並且清空所有的可執行微任務。

setTiemout隊列產生的微任務執行完畢之後，循環則回過頭來開始執行setImmediate隊列。仍然是先將setImmediate隊列中的任務執行完畢，再執行所產生的微任務。

當setImmediate隊列執行產生的微任務全部執行之後，第二輪循環也就結束了。

大家需要注意這裏的循環結束的時間節點。

當我們在執行setTimeout任務中遇到setTimeout時，它仍然會將對應的任務分發到setTimeout隊列中去，但是該任務就得等到下一輪事件循環執行了。例子中沒有涉及到這麼複雜的嵌套，大家可以動手添加或者修改他們的位置來感受一下循環的變化。

OK，到這裏，事件循環我想我已經表述得很清楚了，能不能理解就看讀者老爺們有沒有耐心了。我估計很多人會理解不了循環結束的節點。

當然，這些順序都是v8的一些實現。我們也可以根據上面的規則，來嘗試實現一下事件循環的機制。

   // 用數組模擬一個隊列
    var tasks = [];
    
    // 模擬一個事件分發器
    var addFn1 = function(task) {
        tasks.push(task);
    }
    
    // 執行所有的任務
    var flush = function() {
        tasks.map(function(task) {
            task();
        })
    }
    
    // 最後利用setTimeout/或者其他你認爲合適的方式丟入事件循環中
    setTimeout(function() {
        flush();
    })
    
    // 當然，也可以不用丟進事件循環，而是我們自己手動在適當的時機去執行對應的某一個方法
    
    var dispatch = function(name) {
        tasks.map(function(item) {
            if(item.name == name) {
                item.handler();
            }
        })
    }
    
    // 當然，我們把任務丟進去的時候，多保存一個name即可。
    // 這時候，task的格式就如下
    demoTask =  {
        name: 'demo',
        handler: function() {}
    }
    
    // 於是，一個訂閱-通知的設計模式就這樣輕鬆的被實現了

這樣，我們就模擬了一個任務隊列。我們還可以定義另外一個隊列，利用上面的各種方式來規定他們的優先級。

需要注意的是，這裏的執行順序，或者執行的優先級在不同的場景裏由於實現的不同會導致不同的結果，包括node的不同版本，不同瀏覽器等都有不同的結果。

作者：這波能反殺
鏈接：https://www.jianshu.com/p/12b9f73c5a4f
著作權歸作者所有，任何形式的轉載都請聯繫作者獲得授權並註明出處。

前端基礎進階（十二）：深入核心，詳解事件循環機制

[轉帖]使用NMT和pmap解決JVM資源泄漏問題原創

Python實現大麥網搶票的四大關鍵技術點解析

salesforce零基礎學習（一百三十八）零碎知識點小總結（十）

一款開源的.NET程序集反編譯、編輯和調試神器

關於接口協議，你必須要知道這些！

【2024-05-21】以茶會友

實用的網站小工具

React之Dva的model的屬性 effect參數簡介

MySQL出現2003 - Can't connect to MySQL server on '127.0.0.1' (61 "Connection refused")解決

Typescript 中的 interface 和 type 區別

全國哀悼日全站變灰CSS怎麼碼？

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結