初探 event loop

hsluoyz 發(fā)布于2019-08-23 10:37 / 3505人閱讀

摘要：事件循環(huán)了解知識點線程執(zhí)行棧線程是單線程的語言可以單線程將理解為只有一條車道在車道里后面的車在等前面的車通過后才能通過即當(dāng)前面的程序沒有執(zhí)行后面的程序也不能執(zhí)行執(zhí)行棧執(zhí)行棧像車道被執(zhí)行的程序會放入執(zhí)行棧里但它的執(zhí)行的順序是后面進來的程序先執(zhí)

事件循環(huán) 了解知識點

線程

執(zhí)行棧

task queue

web api

macro task

micro task

線程

javascript是單線程的語言,
可以單線程將理解為只有一條車道,在車道里后面的車在等前面的車通過后,才能通過.
即當(dāng)前面的程序沒有執(zhí)行,后面的程序也不能執(zhí)行.

執(zhí)行棧

執(zhí)行棧像"車道",被執(zhí)行的程序會放入執(zhí)行棧里,
但它的執(zhí)行的順序是,后面進來的程序先執(zhí)行.

示例

視頻源地址

task queue

在線程中有很多等待運行的任務(wù)(程序,而執(zhí)行棧只會放入一個任務(wù).
其他可運行任務(wù)會放入任務(wù)隊列中.
這里雖說是個隊列, 它的執(zhí)行的順序,不會先進的程序先執(zhí)行.
每個event loop都會有一個或多個任務(wù)隊列

web api

javascript是單線程,但也能實現(xiàn)異步,這種實現(xiàn)基與頁面提供很多API,如(setTimeout, ajax, addEventListener ...)
這些都是異步函數(shù),也就是說,運行到異步函數(shù)時,
把異步函數(shù)里閉包放入web api里,等待正確的時機,
web api會把閉包放入task queue里執(zhí)行.

示例

macro task

macro task有setTimeout ，setInterval， setImmediate，requestAnimationFrame,I/O ，UI渲染...
task queue 是由很多個macro task組成的隊列,

micro task

micro task有Promise， process.nextTick， Object.observe， MutationObserver...
每個event loop都會有一個micro task

event loop

執(zhí)行流程

當(dāng)執(zhí)行棧為null時

看task queue的第一個macro task是不是null,如果不是取出放入執(zhí)行棧,如果是跳轉(zhuǎn)5

執(zhí)行棧運行task

運行完畢,把task設(shè)置null,并移出

執(zhí)行 micro task隊列
a. 看micro task隊列第一task個是不是null,如果不是取出放入執(zhí)行棧,如果是跳轉(zhuǎn)f
b. 執(zhí)行棧運行task
c. 運行完畢,把task設(shè)置null,并移出
d. 看micro task隊列下一個task是不是null,如果不是跳轉(zhuǎn)b
f. 結(jié)束micro task隊列執(zhí)行

跳轉(zhuǎn)到1

示例

實戰(zhàn)

猜想

在macro/micro task 進入執(zhí)行棧時,中間應(yīng)該會有一個緩存區(qū),
例如

如果是把整個macro task放入執(zhí)行棧,
按后進程序先執(zhí)行的機制, 應(yīng)該會先打印"b",
但打印的是"a",說明函數(shù)b是等函數(shù)a執(zhí)行完后再進入執(zhí)行棧的,
所以在macro task 會把里面的函數(shù)拆分為一個執(zhí)行的隊列,放入執(zhí)行棧里.

示例

參考資料

https://github.com/ccforward/cc/issues/48
https://juejin.im/entry/596d78ee6fb9a06bb752475c

Make a friend

作者有一年半的前端開發(fā)經(jīng)驗,比較擅長性能優(yōu)化和vue,喜歡對各種原理的深究,
喜歡籃球和電影
如果有趣味相投可以加入微信群