深入淺出Javascript事件循環(huán)機制-上(轉(zhuǎn))

淺薄概念

Javascript是單線程潦俺,執(zhí)行任務(wù)時逾滥,分同步任務(wù)和異步任務(wù),執(zhí)行同步任務(wù)時放入棧中執(zhí)行禁添,執(zhí)行異步任務(wù)時由瀏覽器放入異步隊列撮胧,等同步任務(wù)執(zhí)行完后,再去異步隊列詢問是否有可執(zhí)行的回調(diào)函數(shù)老翘,一直循環(huán)直到異步隊列清空芹啥。
沒有深入!

深入理解

函數(shù)調(diào)用棧和任務(wù)隊列

JavaScript有一個main thread主進程和call-stack(一個調(diào)用堆棧)铺峭,在對
一個調(diào)用堆棧中的task處理的時候墓怀,其他的都要等著。當(dāng)在執(zhí)行過程中遇到一些類似于setTimeout等異步操作的時候卫键,會交給瀏覽器的其他模塊(以webkit為例傀履,是webcore模塊)進行處理,當(dāng)?shù)竭_setTimeout指定的延時執(zhí)行的時間后永罚,task(回調(diào)函數(shù))會放入到任務(wù)隊列直至,一般不同的異步任務(wù)的的回調(diào)函數(shù)會放入不同的任務(wù)隊列之中卧秘。等到調(diào)用棧中所有task執(zhí)行完畢之后呢袱,接著去執(zhí)行任務(wù)隊列中的task(回調(diào)函數(shù))

image.png

在上圖中,調(diào)用棧中遇到DOM操作翅敌、ajax請求以及setTimeout等WebAPIs的時候就會交給瀏覽器內(nèi)核的其他模塊進行處理羞福,webkit內(nèi)核在Javasctipt執(zhí)行引擎之外,有一個重要的模塊是webcore模塊蚯涮。對于圖中WebAPIs提到的三種API治专,webcore分別提供了DOM Binding、network遭顶、timer模塊來處理底層實現(xiàn)张峰。等到這些模塊處理完這些操作的時候?qū)⒒卣{(diào)函數(shù)放入任務(wù)隊列中,之后等棧中的task執(zhí)行完之后再去執(zhí)行任務(wù)隊列之中的回調(diào)函數(shù)棒旗。

從setTimeout看事件循環(huán)機制

一個例子來說明事件循環(huán)機制究竟是怎么執(zhí)行setTimeout的喘批。

image.png

首先main()函數(shù)的執(zhí)行上下文入棧,

image.png

代碼接著執(zhí)行,遇到console.log(‘Hi’),此時log(‘Hi’)入棧铣揉,console.log方法只是一個webkit內(nèi)核支持的普通的方法饶深,所以log(‘Hi’)方法立即被執(zhí)行。此時輸出’Hi’逛拱。

image.png

當(dāng)遇到setTimeout的時候敌厘,執(zhí)行引擎將其添加到棧中。

image.png

調(diào)用棧發(fā)現(xiàn)setTimeout是之前提到的WebAPIs中的API朽合,因此將其出棧之后將延時執(zhí)行的函數(shù)交給瀏覽器的timer模塊進行處理俱两。


image.png

timer模塊去處理延時執(zhí)行的函數(shù)饱狂,此時執(zhí)行引擎接著執(zhí)行將log(‘SJS’)添加到棧中,此時輸出’SJS’锋华。

image.png

當(dāng)timer模塊中延時方法規(guī)定的時間到了之后就將其放入到任務(wù)隊列之中嗡官,此時調(diào)用棧中的task已經(jīng)全部執(zhí)行完畢。

image.png
image.png

調(diào)用棧中的task執(zhí)行完畢之后毯焕,執(zhí)行引擎會接著看執(zhí)行任務(wù)隊列中是否有需要執(zhí)行的回調(diào)函數(shù)衍腥。這里的cb函數(shù)被執(zhí)行引擎添加到調(diào)用棧中,接著執(zhí)行里面的代碼纳猫,輸出’there’婆咸。等到執(zhí)行結(jié)束之后再出棧。

小結(jié)

上面的這一個流程解釋了當(dāng)瀏覽器遇到setTimeout之后究竟是怎么執(zhí)行的芜辕,相類似的還有前面圖中提到的另外的API以及另外一些異步的操作尚骄。
總結(jié)上文說的,主要就是以下幾點:

所有的代碼都要通過函數(shù)調(diào)用棧中調(diào)用執(zhí)行侵续。
當(dāng)遇到前文中提到的APIs的時候倔丈,會交給瀏覽器內(nèi)核的其他模塊進行處理。
任務(wù)隊列中存放的是回調(diào)函數(shù)状蜗。
等到調(diào)用棧中的task執(zhí)行完之后再回去執(zhí)行任務(wù)隊列之中的task需五。

問題

(function test() {
    setTimeout(function() {console.log(4)}, 0);
    new Promise(function executor(resolve) {
        console.log(1);
        for( var i=0 ; i<10000 ; i++ ) {
            i == 9999 && resolve();
        }
        console.log(2);
    }).then(function() {
        console.log(5);
    });
    console.log(3);
})()

在這段代碼里面,多了一個promise轧坎,那么我們可以思考下面這個問題:

promise的task會放在不同的任務(wù)隊列里面宏邮,那么setTimeout的任務(wù)隊列和promise的任務(wù)隊列的執(zhí)行順序又是怎么的呢?

到這里大家看了我說了這么多的task,那么上文中一直提到的task究竟包括了什么缸血?具體是怎么分的蜜氨?
原文:https://zhuanlan.zhihu.com/p/26229293

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市捎泻,隨后出現(xiàn)的幾起案子飒炎,更是在濱河造成了極大的恐慌,老刑警劉巖笆豁,帶你破解...
    沈念sama閱讀 210,978評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件厌丑,死亡現(xiàn)場離奇詭異,居然都是意外死亡渔呵,警方通過查閱死者的電腦和手機怒竿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2 384
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來扩氢,“玉大人耕驰,你說我怎么就攤上這事÷疾颍” “怎么了朦肘?”我有些...
    開封第一講書人閱讀 156,623評論 0 345
  • 文/不壞的土叔 我叫張陵饭弓,是天一觀的道長。 經(jīng)常有香客問我媒抠,道長弟断,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,324評論 1 282
  • 正文 為了忘掉前任趴生,我火速辦了婚禮阀趴,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘苍匆。我一直安慰自己刘急,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,390評論 5 384
  • 文/花漫 我一把揭開白布浸踩。 她就那樣靜靜地躺著叔汁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪检碗。 梳的紋絲不亂的頭發(fā)上据块,一...
    開封第一講書人閱讀 49,741評論 1 289
  • 那天,我揣著相機與錄音折剃,去河邊找鬼另假。 笑死,一個胖子當(dāng)著我的面吹牛微驶,可吹牛的內(nèi)容都是我干的浪谴。 我是一名探鬼主播开睡,決...
    沈念sama閱讀 38,892評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼因苹,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了篇恒?” 一聲冷哼從身側(cè)響起扶檐,我...
    開封第一講書人閱讀 37,655評論 0 266
  • 序言:老撾萬榮一對情侶失蹤头镊,失蹤者是張志新(化名)和其女友劉穎空另,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體咕娄,經(jīng)...
    沈念sama閱讀 44,104評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡腾么,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年奈梳,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片解虱。...
    茶點故事閱讀 38,569評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡攘须,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出殴泰,到底是詐尸還是另有隱情于宙,我是刑警寧澤浮驳,帶...
    沈念sama閱讀 34,254評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站捞魁,受9級特大地震影響至会,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜谱俭,卻給世界環(huán)境...
    茶點故事閱讀 39,834評論 3 312
  • 文/蒙蒙 一奉件、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧旺上,春花似錦瓶蚂、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至征候,卻和暖如春杭攻,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背疤坝。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1 264
  • 我被黑心中介騙來泰國打工兆解, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人跑揉。 一個月前我還...
    沈念sama閱讀 46,260評論 2 360
  • 正文 我出身青樓锅睛,卻偏偏與公主長得像,于是被迫代替她去往敵國和親历谍。 傳聞我的和親對象是個殘疾皇子现拒,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,446評論 2 348

推薦閱讀更多精彩內(nèi)容