一個(gè)完整的事件循環(huán)過(guò)程大概分為以下幾步：
1.檢查調(diào)用棧是否為空刁憋，如果不為空則等待調(diào)用棧執(zhí)行完畢，為空則檢查事件隊(duì)列是否為空拄踪；如果事件隊(duì)列為空則不執(zhí)行任何操作含思，不為空則將隊(duì)首的事件處理器壓入執(zhí)行棧執(zhí)行；
2.調(diào)用棧中的代碼執(zhí)行完畢后檢查微任務(wù)隊(duì)列是否存在微任務(wù)渤闷，如果有則執(zhí)行微任務(wù)俏脊，并且按順訊執(zhí)行完所有的微任務(wù)；
3.執(zhí)行完所有的微任務(wù)后肤晓，進(jìn)行判斷是否要進(jìn)行UI渲染爷贫，如果需要?jiǎng)t進(jìn)行UI渲染不需要?jiǎng)t回到步驟1，如此就完成了一個(gè)事件循環(huán)补憾；
如題通過(guò)一個(gè)實(shí)例來(lái)研究這個(gè)過(guò)程：
<button id="clickMe">click me!</button>
<script>
// 獲取一個(gè)button元素
var clickMe = document.getElementById("clickMe");
// 定義一個(gè)延遲函數(shù)
function delay(second) {
console.time('延遲代碼執(zhí)行時(shí)間');
for (i = 0; i < 10000000000; i++) {
if (i == 379999999*second) { // 379999999大概為當(dāng)前瀏覽器環(huán)境下執(zhí)行1秒能循環(huán)的次數(shù)
break;
}
}
console.timeEnd('延遲代碼執(zhí)行時(shí)間');
}
// 為button添加事件監(jiān)聽(tīng)
clickMe.addEventListener("click",function(){
console.log("觸發(fā)了clickMe");
clickMe.innerHTML = "重新設(shè)置按鈕內(nèi)容";
delay(2);
setTimeout(function(){
console.log("觸發(fā)了setTimeout");
delay(2);
console.log("完成了setTimeout");
},0);
Promise.resolve().then(function(){
console.log("觸發(fā)了Promise")
delay(2);
console.log("完成了Promise"); // 此處可以打上斷點(diǎn)觀察
});
})
</script>
代碼分析：
前提：JavaScript是單線程的漫萄，這說(shuō)明我們想要同一時(shí)間不可能執(zhí)行兩個(gè)函數(shù)，同樣也不可能執(zhí)行兩個(gè)事件盈匾；如果觸發(fā)多個(gè)事件就會(huì)保存在一個(gè)事件隊(duì)列（task queue）里按順序調(diào)用事件的處理器函數(shù)腾务；執(zhí)行處理器函數(shù)實(shí)在調(diào)用棧中（call stack），調(diào)用棧到底長(zhǎng)什么樣我們會(huì)在下面看到削饵。首先我們寫(xiě)個(gè)一個(gè)按鈕id為clickMe（正如它的內(nèi)容）岩瘦，然后是腳本內(nèi)容，包含一個(gè)指向dom元素的變量clickMe和一個(gè)延遲函數(shù)delay以及調(diào)用了一個(gè)綁定事件處理器的方法窿撬；
1.某一個(gè)時(shí)刻點(diǎn)擊了clickMe启昧，綁定在clickMe上的事件處理器被添加到了事件隊(duì)列，需要提醒的是事件隊(duì)列的操作跟調(diào)用棧執(zhí)行并非同一線程劈伴，因?yàn)椴蝗绱说脑捲谡{(diào)用棧工作時(shí)產(chǎn)生的事件將無(wú)法添加到隊(duì)列密末，我們知道這顯然不是的。按照步驟1調(diào)用棧不存在可執(zhí)行代碼，隨即檢查事件隊(duì)列是否為空严里，此時(shí)事件隊(duì)列恰有我們觸發(fā)的按鈕點(diǎn)擊事件的處理器函數(shù)新啼，隨即將處理器函數(shù)壓入到調(diào)用棧中執(zhí)行，然后按照從上到下的順序執(zhí)行代碼刹碾，首先在控制臺(tái)可以看到“觸發(fā)了clickMe”燥撞，然后更改了按鈕的html內(nèi)容，內(nèi)容并不會(huì)馬上被渲染還是因?yàn)閱尉€程迷帜，在代碼執(zhí)行時(shí)渲染引擎并不會(huì)執(zhí)行渲染（當(dāng)然并不代表就共用一個(gè)線程）叨吮，然后又定義了一個(gè)超時(shí)器，當(dāng)然回調(diào)函數(shù)會(huì)在一個(gè)“合適”的時(shí)機(jī)執(zhí)行瞬矩，然后是觸發(fā)了一個(gè)promise茶鉴，同樣超時(shí)器的回調(diào)函數(shù)也會(huì)在一個(gè)合適的”時(shí)機(jī)“執(zhí)行，此時(shí)快照如下：
2.當(dāng)代碼執(zhí)行到了處理器函數(shù)末尾時(shí)景用，函數(shù)執(zhí)行完畢出棧涵叮，開(kāi)始下個(gè)步驟，檢查是否存在微任務(wù)伞插，微任務(wù)（micro task）是相對(duì)于宏任務(wù)（macro task）的割粮，宏任務(wù)包含：主程序script,setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering,這些任務(wù)被分配到瀏覽器的不同部分去單獨(dú)執(zhí)行所以定義為宏任務(wù)，微任務(wù)包含：process.nextTick, Promise, Object.observe, MutationObserver;這些任務(wù)不需要單獨(dú)執(zhí)行而又有別于同步執(zhí)行稱為微任務(wù)媚污；現(xiàn)在promise是微任務(wù)舀瓢，setTimeout是宏任務(wù)，當(dāng)檢查微任務(wù)隊(duì)時(shí)耗美，我們知道promise的“時(shí)機(jī)”來(lái)了京髓，隨即將回調(diào)函數(shù)壓入調(diào)用棧執(zhí)行，首先我們會(huì)看到：“觸發(fā)了promise”商架，大概經(jīng)過(guò)兩秒后我們又看到“完成了promise”堰怨，那你會(huì)問(wèn)延遲函數(shù)的作用是什么，很簡(jiǎn)單方便截圖蛇摸，截圖的作用呢备图？很簡(jiǎn)單驗(yàn)證事件處理器中修改了按鈕的內(nèi)容是否改變也就是是否發(fā)生了UI渲染，那打個(gè)斷點(diǎn)不就行了還得費(fèi)勁寫(xiě)個(gè)函數(shù)赶袄？嗯揽涮。。饿肺〗В看下面第二張圖，將斷點(diǎn)打在 “console.log("完成了Promise");” 觀察按鈕上的文字唬格，對(duì)家破，它改變了Ｑ账怠９焊凇汰聋！在單線程的JS函數(shù)執(zhí)行時(shí)還能進(jìn)行UI渲染？顯然這是瀏覽器debugger策略喊积，便于我們觀察效果而已烹困，但對(duì)我們研究真正過(guò)程會(huì)產(chǎn)生誤解。執(zhí)行到延遲函數(shù)時(shí)快照如下：
button的內(nèi)容并沒(méi)有改變乾吻，證明了在promise執(zhí)行完之前不會(huì)渲染UI
3.promise執(zhí)行完畢后開(kāi)始進(jìn)行UI渲染髓梅，渲染后快照如下圖所示（在setTimeout得延遲函數(shù)中截圖）：
4.到第3步已經(jīng)是一個(gè)完整的循環(huán)了，但我們?nèi)耘f寫(xiě)了一個(gè)定期器來(lái)驗(yàn)證微任務(wù)比宏任務(wù)執(zhí)行的早并且在渲染之前執(zhí)行绎签，重復(fù)這個(gè)過(guò)程將定時(shí)器回調(diào)壓入調(diào)用棧執(zhí)行枯饿，我們借用延遲函數(shù)獲得如下快照：
