事件循環（Event Loop），是每個JS開發者都會接觸到的概念，但是剛接觸時可能會存在各種疑惑。
眾所周知，JS是單線程的，即同一時間只能運行一個任務。一般情況下這不會引發問題，但是如果我們有一個耗時較多的任務，我們必須等該任務執行完畢才能進入下一個任務，然而等待的這段時間常常讓我們無法忍受，因為我們這段時間什麼都不能做，包括頁面也是鎖死狀態。
好在，時代在進步，瀏覽器向我們提供了JS引擎不具備的特性：Web API。Web API包括DOM API、定時器、HTTP請求等特性，可以幫助我們實現異步、非阻塞的行為。我們可以通過異步執行任務的方法來解決單線程的弊端，事件循環為此而生。
提問QAQ：為什麼JavaScript是單線程的？
多個線程表示您可以同時獨立執行程序的多個部分。確定一種語言是單線程還是多線程的最簡單方法是看它擁有有多少個調用堆棧。JS 只有一個，所以它是單線程語言。
將JS設計為單線程是由其用途運行環境等因素決定的，作為瀏覽器腳本語言，JS的主要用途是與用戶互動，以及操作DOM。這決定了它只能是單線程，否則會帶來很複雜的同步問題。同時，單線程執行效率高。
1. Event Loop舊印象
大家熟悉的關於事件循環的機制說法大概是：主進程執行完了之後，每次從任務隊列里取一個任務執行。如圖所示，所有的任務分為同步任務和異步任務，同步任務直接進入任務隊列–>主程序執行；異步任務則會掛起，等待其有返回值時進入任務隊列從而被主程序執行。異步任務會通過任務隊列的機制(先進先出的機制)來進行協調。具體如圖所示：
同步和異步任務分別進入不同的執行環境，同步的進入主線程，即主執行棧，異步的進入任務隊列。主線程內的任務執行完畢為空，會去任務隊列讀取對應的任務，推入主線程執行。 上述過程的不斷重複就是我們所熟悉的Event Loop (事件循環)。但是promise出現之後，這個說法就不太準確了。
2. Event Loop 後印象
2.1 理論
這裏首先用一張圖展示JavaScript的事件循環：
直接看這張圖，可能黑人問號已經出現在同學的腦海。。。
這裏將task分為兩大類，分別是macroTask（宏任務）和microTask（微任務）.一次事件循環：先運行macroTask隊列中的一個，然後運行microTask隊列中的所有任務。接着開始下一次循環（只是針對macroTask和microTask，一次完整的事件循環會比這個複雜的多）。
那什麼是macroTask？什麼是microTask呢？
JavaScript引擎把我們的所有任務分門別類，一部分歸為macroTask，另外一部分歸為microTack，下面是類別劃分：
macroTask:
- setTimeout
- setInterval
- setImmediate
- requestAnimationFrame
- I/O
- UI rendering
microTask:
- process.nextTick
- Promise
- Object.observe
- MutationObserver
我們所熟悉的定時器就屬於macroTask，僅僅了解macroTask的機制還是不夠的。為直觀感受兩種隊列的區別，下面上代碼進行實踐感知。
2.2 實踐
以setTimeout、process.nextTick、promise為例直觀感受下兩種任務隊列的運行方式。
console.log('main1');
process.nextTick(function() {
console.log('process.nextTick1');
});
setTimeout(function() {
console.log('setTimeout');
process.nextTick(function() {
console.log('process.nextTick2');
});
}, 0);
new Promise(function(resolve, reject) {
console.log('promise');
resolve();
}).then(function() {
console.log('promise then');
});
console.log('main2');
別著急看答案，先以上面的理論自己想想，運行結果會是啥？
最終結果是這樣的：
main1
promise
main2
process.nextTick1
promise then
// 第二次事件循環
setTimeout
process.nextTick2
process.nextTick 和 promise then在 setTimeout 前面輸出，已經證明了macroTask和microTask的執行順序。但是有一點必須要指出的是。上面的圖容易給人一個錯覺，就是主進程的代碼執行之後，會先調用macroTask，再調用microTask，這樣在第一個循環里一定是macroTask在前，microTask在後。
但是最終的實踐證明：在第一個循環里，process.nextTick1和promise then這兩個microTask是在setTimeout這個macroTask里之前輸出的，這是因為Promises/A+規範規定主進程的代碼也屬於macroTask。
主進程這個macroTask（也就是main1、promise和main2）執行完了，自然會去執行process.nextTick1和promise then這兩個microTask。這是第一個循環。之後的setTimeout和process.nextTick2屬於第二個循環
別看上面那段代碼好像特別繞，把原理弄清楚了，都一樣 ~
requestAnimationFrame、Object.observe(已廢棄) 和 MutationObserver這三個任務的運行機制大家可以從上面看到，不同的只是具體用法不同。重點說下UI rendering。在HTML規範：event-loop-processing-model里敘述了一次事件循環的處理過程，在處理了macroTask和microTask之後，會進行一次Update the rendering，其中細節比較多，總的來說會進行一次UI的重新渲染。
3. 小結
總而言之，記住一次事件循環：先運行macroTask隊列中的一個，然後運行microTask隊列中的所有任務。接着開始下一次循環。
參考文獻：
- 總是一知半解的Event Loop
- 深入理解事件循環機制
- JavaScript運行機制
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※超省錢租車方案
※別再煩惱如何寫文案,掌握八大原則!
※回頭車貨運收費標準
※教你寫出一流的銷售文案?
※FB行銷專家,教你從零開始的技巧
※聚甘新
