事件循環(huán)機制（event loop）

tain335 發(fā)布于2019-08-23 18:23 / 3560人閱讀

摘要：了解事件循環(huán)機制有助于理解的執(zhí)行過程，同時這也是面試常見題。那么這個回調(diào)函數(shù)將在何時由誰執(zhí)行呢已知是瀏覽器環(huán)境提供的，因此瀏覽器將對它進行處理，瀏覽器會在本次事件完成，即計時結(jié)束后，將回調(diào)函數(shù)加入循環(huán)隊列中，然后等待被加入執(zhí)行棧執(zhí)行。

如果有人問JavaScript是什么，也許你會說它是一個單線程、非阻塞、異步、解釋型的腳本語言。那么作為一個單線程語言，它是怎么實現(xiàn)非阻塞、異步的？這就涉及到了瀏覽器的事件循環(huán)機制，事件循環(huán)并非由ECMAScript定義，而是在HTML Standard中定義。了解事件循環(huán)機制有助于理解JS的執(zhí)行過程，同時這也是面試常見題。
在瀏覽器中，瀏覽器會提供JavaScript的運行環(huán)境，如Chrome的V8，以及一些Web API，如DOM、Ajax、setTimeout等。

如圖，在運行環(huán)境中存在一個執(zhí)行棧stack，為當(dāng)前正在執(zhí)行的JS代碼，當(dāng)調(diào)用一個普通函數(shù)時，會生成新的作用域，并入棧，待執(zhí)行結(jié)束后出棧，此時不涉及異步操作。但是當(dāng)調(diào)用了異步函數(shù)時，情況就有所不同了，以setTimeout為例，當(dāng)調(diào)用了setTimeout后，回調(diào)函數(shù)將在一段時間后才執(zhí)行，由于JavaScript是異步，它不會等待回調(diào)函數(shù)執(zhí)行，而是會立即獲得結(jié)果并從上至下繼續(xù)執(zhí)行代碼。那么這個回調(diào)函數(shù)將在何時由誰執(zhí)行呢？已知setTimeout是瀏覽器環(huán)境提供的API，因此瀏覽器將對它進行處理，瀏覽器會在本次事件完成，即計時結(jié)束后，將回調(diào)函數(shù)加入循環(huán)隊列task queue中，然后等待被加入執(zhí)行棧執(zhí)行。
循環(huán)隊列中的任務(wù)被調(diào)用的時機，是當(dāng)執(zhí)行棧為空，即當(dāng)前事件執(zhí)行結(jié)束后，此時瀏覽器會查看循環(huán)隊列是否為空，在非空時以FIFO的方式調(diào)用隊列中的事件，加入執(zhí)行棧，當(dāng)執(zhí)行棧再次為空時，再從循環(huán)隊列中查找任務(wù)，這就形成了事件循環(huán)event loop，瀏覽器通過該機制讓單線程的JS可以執(zhí)行異步任務(wù)。這就可以解釋一些很常見的關(guān)于setTimeout執(zhí)行順序的面試題。除了setTImeout外，常見的task任務(wù)源還有setInterval、setImmediate、I/O、UI rendering、XMLHttpRequest等。
除了以上普通的task，瀏覽器還引入了microtask的概念，microtask存儲在microtask queue中，它的執(zhí)行時機與task不同，當(dāng)執(zhí)行棧為空時，優(yōu)先調(diào)用microtask中的任務(wù)執(zhí)行，因此只有當(dāng)microtask queue為空時，才會調(diào)用循環(huán)隊列中的任務(wù)。常見的microtask源有promise、process.nextTick，關(guān)于promise的執(zhí)行時機，也是面試較為常見的問題。
接下來就以一段代碼的執(zhí)行過程為例，解釋event loop。

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

請問以上代碼的執(zhí)行結(jié)果？
我們試著縷一縷這些代碼的執(zhí)行順序，首先這一整段代碼會被加入執(zhí)行棧中，然后從上至下依次解釋執(zhí)行
1：直接輸出1
2：此時調(diào)用了setTimeout，因此回調(diào)函數(shù)會在0ms后加入到循環(huán)隊列中
3：此時實例化了一個promise，會立即執(zhí)行實例化時的代碼，因此會輸出2
4：此時調(diào)用了promise的then方法，該方法的回調(diào)函數(shù)會被加入到microtask queue中
5：直接輸出3
到此，執(zhí)行棧執(zhí)行結(jié)束，此時根據(jù)事件循環(huán)機制，首先查看microtask queue是否為空，會發(fā)現(xiàn)隊列中有promise.then方法加入的回調(diào)函數(shù)，將其調(diào)入執(zhí)行棧執(zhí)行，輸出4。執(zhí)行棧再次執(zhí)行結(jié)束，再查看microtask queue，此時為空，接著查看任務(wù)隊列task queue，會發(fā)現(xiàn)由setTimeout方法加入的回調(diào)函數(shù)，調(diào)入執(zhí)行棧執(zhí)行，輸出5。因此最后的輸出順序是 1 -> 2 -> 3 -> 4 -> 5

以上是關(guān)于瀏覽器端事件循環(huán)的個人理解，為什么要強調(diào)是瀏覽器端，因為從以上解釋可以看出JS只是運行在瀏覽器提供的執(zhí)行環(huán)境中，事件循環(huán)其實是由瀏覽器環(huán)境實現(xiàn)的，除了瀏覽器，還有Node環(huán)境，而Node環(huán)境與瀏覽器環(huán)境又有著許多差別，Node環(huán)境中的事件循環(huán)與瀏覽器端存在一些差異，待有空了再寫一篇關(guān)于Node環(huán)境中的事件循環(huán)。關(guān)于瀏覽器事件循環(huán)，可以觀看https://www.youtube.com/watch...