摘要：事件循環(huán)事件循環(huán)具有至少兩個隊列處理任務。同時含有宏任務和微任務主線程運行運行運行運行本例中在的事件處理函數(shù)里增加了一個立即兌現(xiàn)的，需要運行。處理的事件處理函數(shù)計時器主線程運行運行運行運行

一直對js的事件循環(huán)不是很清晰，最近看了JavaScript忍者秘籍的第13章后，有了一些感悟，特此總結(jié)一下，分享給大家。

眾所周知，JavaScript是單線程執(zhí)行模型，同一時刻只能執(zhí)行一個代碼片段，一個任務開始后知道運行完成，不會被其他任務中斷。當一個任務花費的時間很長的話，用戶就會明顯的感覺到卡頓。瀏覽器為了解決這個問題引入了事件循環(huán)的概念（Event Loop）。

事件循環(huán)具有至少兩個隊列處理任務。任務分為兩類，宏任務（macro-task）和微任務（micro-task）。

1.宏任務代表一個個離散、獨立的工作單元，運行完之后，瀏覽器可以繼續(xù)其他的調(diào)度。包括：創(chuàng)建文檔對象，解析HTML，執(zhí)行JavaScript，以及各種事件……
2.微任務是更小的任務，主要用戶更新應用程序的狀態(tài)，必須在瀏覽器任務繼續(xù)執(zhí)行其他任務之前執(zhí)行。微任務需要盡可能快地通過異步方式執(zhí)行，同時不能產(chǎn)生全新的微任務。包括promise、回調(diào)函數(shù)、DOM發(fā)生變化……

// 主線程JavaScript運行15ms
btn1.addEventListener("click", function() {運行 8ms}, false);
btn2.addEventListener("click", function() {運行 5ms}, false);

現(xiàn)在假設主線程運行15ms， 在第5ms單擊btn1，在第12ms的時候單擊btn2?；趩尉€程執(zhí)行模型，單擊按鈕之后不會立即執(zhí)行對應的處理函數(shù)，因為一個任務一旦開始就不會被另一個任務中斷。因此，在主線程執(zhí)行的15ms期間，按鈕的單擊處理函數(shù)放入隊列。當主線程執(zhí)行完成也就是15ms之后，程序開始處理微任務，因為當前不存在微任務，跳過此步驟，開始執(zhí)行更新UI。

之后進入第二次循環(huán)，也就是開始執(zhí)行btn1的處理函數(shù)，需要運行8ms，btn2處理函數(shù)在隊列中等待。當btn1處理函數(shù)執(zhí)行完之后，瀏覽器檢查微任務是否存在和是否更新UI，刪除任務隊列里的btn1的處理函數(shù)。

最后進入第三次循環(huán)，開始執(zhí)行btn2的處理函數(shù)，需要運行5ms，處理函數(shù)執(zhí)行完之后，檢查微任務和是否需要更新UI，刪除任務隊列里的btn2的處理函數(shù)，最終任務隊列為空，循環(huán)結(jié)束。

// 主線程JavaScript運行15ms
btn1.addEventListener("click", function() {
    Promise.resolve().then(() => {
       運行 4ms 
    });
    運行 8ms 
}, false);
btn2.addEventListener("click", function() {運行 5ms}, false);

本例中在btn1的事件處理函數(shù)里增加了一個立即兌現(xiàn)的Promise，需要運行4ms。

現(xiàn)在代碼的執(zhí)行順序為：

主線程執(zhí)行15ms，在5ms和12ms的時候分別將處理函數(shù)放入任務隊列，更新UI。

15m后處理btn1事件處理函數(shù)，發(fā)現(xiàn)Promise，放入微任務隊列，btn1事件處理函數(shù)繼續(xù)執(zhí)行8ms，檢查微任務隊列發(fā)現(xiàn)有Promise回調(diào)函數(shù)，然后開始執(zhí)行Promise回調(diào)函數(shù)，運行4ms，繼續(xù)檢查微任務隊列，如果為空，檢查是否需要更新UI，進入下一輪循環(huán)。

處理btn2的事件處理函數(shù)……

// 主線程JavaScript運行18ms
setTimeout(function() {
    運行6ms;
}, 10);
setInterval(function() {
    運行8ms;
}, 10);
btn1.addEventListener("click", function() {運行 10ms}, false);