本文首發(fā)于我的博客懂算，這是我的github，歡迎star穗慕。
在網(wǎng)上找了很多事件循環(huán)和任務隊列相關的文章，有些說的不是很清楚妻导，看完感覺還是有些暈暈乎乎逛绵，所以寫這篇博客把整體思路梳理一下。如果你有什么不同的理解倔韭，或是疑惑的地方术浪，可以留言討論。這里是我的github寿酌，歡迎來訪胰苏。
事件循環(huán)與任務隊列是
JS中比較重要的兩個概念。這兩個概念在ES5和ES6兩個標準中有不同的實現(xiàn)醇疼。尤其在ES6標準中碟联，清楚的區(qū)分宏觀任務隊列和微觀任務隊列才能解釋Promise一些看似奇怪的表現(xiàn)妓美。
事件循環(huán)
事件循環(huán)是什么？為什么要有事件循環(huán)這個東西鲤孵？我們都知道JS是單線程的壶栋，但是像Ajax，或是DOM事件這種很耗時的操作普监，需要用并發(fā)處理贵试，否則單線程會長時間等待，什么也做不了凯正。而單線程循環(huán)就是并發(fā)的一種形式毙玻，一個線程中只有一個事件循環(huán)。而任務隊列是用來配合事件循環(huán)完成操作的廊散，一個線程可以擁有多個任務隊列桑滩。
任務隊列
任務隊列是什么？故名思意允睹，排著任務的隊列运准。所謂任務是WebAPIs返回的一個個通知，讓JS主線程在讀取任務隊列的時候得知這個異步任務已經(jīng)完成缭受，下一步該執(zhí)行這個任務的回調(diào)函數(shù)了胁澳。主線程擁有多個任務隊列，不同的任務隊列用來排列來自不同任務源的任務米者。任務源是什么韭畸？像setTimeout/Promise/DOM事件等都是任務源，來自同類任務源的任務我們稱它們是同源的蔓搞，比如setTimeout與setInterval就是同源的胰丁。在ES6標準中任務隊列又分為宏觀任務隊列和微觀任務隊列，我們后邊再詳細討論喂分。
下面先通俗的講述一下ES5中事件循環(huán)到底是怎么循環(huán)的隘马，如圖（據(jù)阮一峰前輩的教程）：
圖中有三大塊：
- 函數(shù)調(diào)用棧：即執(zhí)行棧。
- WebAPIs：瀏覽器的接口妻顶。比如一個
Ajax操作酸员，主線程會把收發(fā)Ajax交給瀏覽器的API，之后就繼續(xù)做別的事情讳嘱，瀏覽器在接收到Ajax返回的數(shù)據(jù)之后幔嗦，會把一個Ajax完成的事件排到相應的任務隊列后邊。 - 任務隊列們：主線程中有多個任務隊列沥潭，同源的任務排在屬于自己的任務隊列邀泉。
一個具體點的栗子。比如現(xiàn)在打開了一個頁面，里邊有一段<script>汇恤，其中有Ajax庞钢，DOM操作等等。這段JS是在瀏覽器提供的全局環(huán)境（瀏覽器中是window）里執(zhí)行的因谎，執(zhí)行中遇到函數(shù)調(diào)用時會壓入執(zhí)行棧基括。
- 主線程在遇到
Ajax或是setTimeout這種異步操作時會交給瀏覽器的WebAPIs，然后繼續(xù)執(zhí)行后邊的代碼财岔，直到最后執(zhí)行棧為空风皿。 - 瀏覽器會在不確定的時間將完成的任務返回，排到相應的任務隊列后匠璧。
- 執(zhí)行棧為空后桐款，主線程會到任務隊列中去取任務，這些任務會告訴下一步應該執(zhí)行哪些回調(diào)函數(shù)夷恍。任務隊列是具有優(yōu)先級的魔眨，按照優(yōu)先級決定訪問的先后順序。而優(yōu)先級在不同的環(huán)境中會有所不同酿雪，所以不能給出一個固定的優(yōu)先級遏暴。
- 每訪問一個隊列，執(zhí)行棧會執(zhí)行完這個任務隊列的所有的代碼执虹，然后再取下一個任務隊列需要執(zhí)行的的代碼拓挥。如果在執(zhí)行中遇到了當前屬于任務隊列的異步任務時唠梨。此次任務的返回不會直接排到當前任務隊列之后袋励。因為這屬于兩次不同的事件循環(huán)，會被區(qū)分開來当叭。
就這樣循環(huán)執(zhí)行茬故，直到三大塊全為空，這稱為事件循環(huán)蚁鳖。
微觀任務隊列
ES6標準中任務隊列存在兩種類型磺芭，一種就是上邊提到的一些隊列，比如setTimeout醉箕、網(wǎng)絡請求Ajax钾腺、用戶I\O等都屬于宏觀任務隊列（macrotask queue），另一種是微觀任務隊列（microtask queue）讥裤，Promise就屬于微觀任務隊列放棒。
??添加了微觀任務隊列之后事件循環(huán)有什么變化呢？在執(zhí)行棧執(zhí)行的過程中會把屬于微觀任務隊列的任務分配到相應的微觀任務隊列中去己英。而在調(diào)用棧執(zhí)行空之后间螟，主線程讀取任務隊列時，會先讀取所有微觀任務隊列，然后讀取一個宏觀任務隊列厢破，再讀取所有的微觀任務隊列荣瑟。如圖：
好了，說了很多概念上的東西摩泪，不如一段代碼來的清晰：
setTimeout(function(){console.log(4)},0);
new Promise(function(resolve){
console.log(1)
for( var i=0 ; i<10000 ; i++ ){
i==9999 && resolve()
}
console.log(2)
}).then(function(){
console.log(5)
});
console.log(3);
- 腳本開始執(zhí)行笆焰，最先遇到
setTimeout，交給瀏覽器去計時加勤，達到setTimeout限制最短計時之后仙辟，把這個任務推入setTimeout隊列。 - 遇到
Promise構(gòu)造函數(shù)鳄梅，構(gòu)造函數(shù)參數(shù)執(zhí)行叠国，輸出1，調(diào)用resolve改變Promise對象的狀態(tài)戴尸，然后輸出2粟焊。 -
Promise對象調(diào)用then方法，將這個任務推入Promise任務隊列孙蒙。 - 執(zhí)行
console.log(3)项棠，輸出3。 - 調(diào)用棧為空挎峦，讀取任務隊列香追，按照
讀取所有微觀任務隊列 -> 執(zhí)行 ->
讀取一個宏觀任務隊列 -> 執(zhí)行 ->
讀取所有微觀任務隊列 -> 執(zhí)行 ->
再讀取一個宏觀任務隊列...的順序。 - 讀取所有微觀任務隊列中的任務坦胶，執(zhí)行這些任務指定的回調(diào)函數(shù)透典。執(zhí)行
then指定的回調(diào)函數(shù)，輸出5（微觀任務隊列也具有優(yōu)先級）顿苇。 - 最后讀取到
setTimeout的任務峭咒，執(zhí)行回調(diào)函數(shù)，輸出4纪岁。
所以最后的輸出順序是1,2,3,5,4凑队，而不是1,2,3,4,5。如果不清楚微觀任務隊列的執(zhí)行機制幔翰，很容易將兩個異步任務歸為一類漩氨，將執(zhí)行順序判斷錯誤。
到這里算是把事件循環(huán)和任務隊列說的比較清楚了遗增，參考了很多大佬的博客與討論：
http://www.ruanyifeng.com/blog/2014/10/event-loop.html
https://www.zhihu.com/question/36972010
http://www.reibang.com/p/12b9f73c5a4f
http://www.cnblogs.com/hity-tt/p/6733062.html
如果你有不同的理解請到博客下方留言叫惊，這是我的github，歡迎來訪贡定，你的star就是我的動力赋访。
