[JS的中的EventLoop|青训营笔记]

45 阅读2分钟

Event Loop,是指瀏覽器中的事件環。這個是面試中常常會遇到的問題,因此有必要專門寫一個文章進行自我的複習和認識。

JS是單線程的,為了防止一個函數或者一個請求執行的時間過長,阻塞後面的代碼,所以會將同步代碼壓入執行棧中,依次執行,將異步代碼推入異步隊列之中。異步隊列又分為宏任務隊列和微任務隊列,又因為宏任務隊列的執行時間較長,所有微任務隊列要優先於宏任務隊列。微任務的代表就是Promise.then,MutationObserver,宏任務的話就是setInterval,setTimeout。

瀏覽器的事件環的運行機制是,先執行棧中的任務,棧中的任務執行後就會執行微任務,微任務清空完成後再執行宏任務,這之後再取出一個宏任務,再去執行微任務。重複這樣的操作,不停的循環下去。

事件循環劃分為以下幾個步驟:一、函數入棧,當Stack(棧)中執行到一步任務的時候,將這個異步任務給到WebAPIs,接著執行同步任務,直到Stack裡面為空。

二、這個期間,WebAPIs會完成這個事件,把回調函數放入隊列中等待執行,也就是微任務放到了微任務隊列,宏任務放到宏任務隊列。

三、執行棧為空的時候,Event Loop把微任務隊列執行清空。

四、微任務的隊列清空之後,就會進入到宏任務隊列,取到宏任務隊列中的第一項任務,放入到Stack中執行,執行完成後,查看微任務隊列是否還有任務,如果有的話,就清空微任務的隊列。之後再次重複這個過程,從宏任務中取任務執行,執行完成,繼續清空微任務的隊列,如此反復循環。