? ? 在去年曾經做過一次分享名為<eventLoop狂歡>的對JS時間循環(huán)機制的簡述.而今過了一年,對前端又新增了部分理解.今天借著靚仔奶茶威脅之緣由,再來復習一下何謂eventloop.
對筆者有所懷疑的可以參考阮一峰大師的著作?http://www.ruanyifeng.com/blog/2013/10/event_loop.html?
基本阮大師的文章,文筆過人,才華橫溢,精致入微又振振有詞,一篇文章就足以對eventloop全貌就有基本的了解.
先看看阮大師筆下的定義:?
然而筆者沒看.因為太長了.
本文只是基于筆者實踐才是檢驗真理的唯一標準這以觀念,來用實例闡述一下筆者眼中的eventloop.
在這里提及一下去年百度百科上的解釋,這也是去年我板書用的一個解釋:
現(xiàn)在這個詞條在網上已經找不到了.主要原因就是這里提到的"先執(zhí)行宏任務,然后執(zhí)行微任務"這一點描述其實很有爭議,從宏觀上來說,如果把主程序當做一個很大的宏任務的時候,那么的確是"先宏后微",但是若論實際的可用來做開發(fā)實戰(zhàn)指導的,實際上是"先微后宏".可以用一個小例子來輕松舉證
new?Promise((resolve)?=>?{
??setTimeout(()?=>?{
????//?以下代碼點上可以看做同時將A與B壓入任務隊列
????//?將宏任務B入隊列
????setTimeout(()?=>?{
??????console.log('宏任務B執(zhí)行')
????},?0);
????//?將微任務A入隊列
????resolve()
????//?以上代碼時間點上可以看做同時將A與B壓入任務隊列
??},?1000);
}).then(()?=>?{
??console.log('微任務A執(zhí)行')
})
可以直接粘貼在瀏覽器或者在node中查看,結果都先執(zhí)行微任務A,再執(zhí)行宏任務B
可見在執(zhí)行順序上是微任務執(zhí)行優(yōu)先級 > 宏任務執(zhí)行優(yōu)先級
不過這只是一個比較粗淺的實踐理論,要究其根本為何會出現(xiàn)這種現(xiàn)象,主要還是要圍繞runTime的運行機制
以下這張圖可以比較好的詮釋在eventLoop中runTime到底干了什么
但這個圖也是來源于網絡.無證之罪告訴我們,凡是與人相關的,都有一定的主觀性.不過對于實戰(zhàn)來說,這張圖解還是有相當?shù)囊饬x的.
首先eventloop的機制首先目的就是為了解決JS的異步規(guī)范問題.目前的規(guī)范是在同等條件下,微任務(主要是promise的then)會凌駕于其他異步任務的執(zhí)行.
在筆者的個人理解中,其實所謂的宏任務隊列與微任務隊列只是邏輯上的構造,執(zhí)行任務的順序,完全是取決于入棧條件的觸發(fā)先后.所謂的先微后宏,不過是因為在多個異步處理模塊中,微任務其實是類似于算作一個同步任務在處理,當resolve函數(shù)觸發(fā)的時候,會直接把.then函數(shù)直接入棧,而其他異步操作都有依賴于某個外部模塊進行,比如計時模塊,網絡IO模塊等等.
當然,這種假說是否是正確的,且待筆者下回深入機理,驗證解析.
