之前的文章中，有一篇是提到了Vue.$nextTick(使用vue nextTick解決的一個問題)，后面想著去學習相關的知識，發(fā)現(xiàn)js中的Event Loop(事件循環(huán))還是十分重要且需要理解的內(nèi)容，雖然以前也有了解過，但畢竟不夠深入，本文就是總結(jié)一些關于Event Loop比較重要的知識

相關概念

以下的概念是理解Event Loop所必須的，相信大家在學習js的過程中，也或多或少的遇到過。

同步事件、異步事件

同步事件指的就是js中按照從上到下的順序依次、先后執(zhí)行的事件；對于大多數(shù)的js語句來說都是同步的，一條語句執(zhí)行完了，就執(zhí)行下一條語句。
異步事件則通常是一些比較消耗時間、需要執(zhí)行一系列操作的事件，最常見的異步事件就是api請求；對于異步事件，通常我們只需要得到它的結(jié)果就好了，所以在執(zhí)行的過程中它會被掛起，待到有結(jié)果時再執(zhí)行后續(xù)操作。

執(zhí)行棧(call-stack 也叫調(diào)用棧)

首先理解一下js的內(nèi)存模式，在js中，數(shù)據(jù)結(jié)構(gòu)主要存在棧(stack)和堆(heap)，其中堆主要用以存儲復雜數(shù)據(jù)類型的變量；而執(zhí)行棧主要是用來存儲和執(zhí)行上下文，而由于基本數(shù)據(jù)類型的變量值都被保存在執(zhí)行上下文中，所以基本數(shù)據(jù)類型也是存儲在執(zhí)行棧中(閉包除外)，除此之外，復雜數(shù)據(jù)類型的引用也是如此

任務隊列

在js中，有兩種任務隊列，分別是宏任務隊列和微任務隊列
宏任務隊列：script全部代碼（可以把整個script當成一個宏任務）、setTimeOut、setInterval、I/O、UI Rendering
微任務隊列：Promise、Process.nextTick(node)

Event Loop的概念

Event Loop是用來協(xié)調(diào)各種事件、用戶交互、腳本執(zhí)行、UI渲染、網(wǎng)絡請求等的一種機制。
在js中使用這種機制是因為js本身是單線程的，如果把所有事件都依次從上到下執(zhí)行，那么在遇到一些耗時的事件（如請求api），還沒有結(jié)果時，整個js線程就會在這里干等著，在用戶看來，就是程序發(fā)生了阻塞。
而使用了Event Loop機制后，就會使得js執(zhí)行的效率變高，既然有耗時的事件，為何不先放在一旁，先做可以立即完成的，然后等耗時的有結(jié)果了再進行下一步操作，而Event Loop就是這么一種事件協(xié)調(diào)的機制。

Event Loop的過程

在Event Loop中，每一次循環(huán)稱為一次tick，每一次tick會以下操作：

• 調(diào)用棧選擇最先進入隊列的宏任務(一般是script 整體代碼)，如果有則執(zhí)行；
• 檢查是否存在微任務，如果存在則不停地執(zhí)行，直至清空微任務隊列；

• 瀏覽器更新渲染
  結(jié)合以下的圖片理解：

  
  
  Event Loop.png
  
  

  可能上圖會有所誤導，讓人以為存在多個微任務隊列，而只存在一個宏任務隊列，其實不然，每個宏任務隊列都保證按照回調(diào)函數(shù)入隊列的順序依次執(zhí)行宏任務，在宏任務或者微任務中產(chǎn)生的新微任務 會被壓入到微任務隊列中并執(zhí)行。而在執(zhí)行兩個宏任務之間，也即在執(zhí)行下一個宏任務之前，會優(yōu)先執(zhí)行完所有微任務，也即會優(yōu)先清空已有的微任務隊列。所以說，上圖中第二個微任務隊列產(chǎn)生的時候，第一個微任務隊列已被清空，也就是實際上只有一個微任務隊列，它們不會同時存在。