初探 event loop

hsluoyz 發布于2019-08-23 10:37 / 3385人閱讀

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

事件循環 了解知識點

線程

執行棧

task queue

web api

macro task

micro task

線程

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

執行棧

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

示例

視頻源地址

task queue

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

web api

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

示例

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

執行流程

當執行棧為null時

看task queue的第一個macro task是不是null,如果不是取出放入執行棧,如果是跳轉5

執行棧運行task

運行完畢,把task設置null,并移出

執行 micro task隊列
a. 看micro task隊列第一task個是不是null,如果不是取出放入執行棧,如果是跳轉f
b. 執行棧運行task
c. 運行完畢,把task設置null,并移出
d. 看micro task隊列下一個task是不是null,如果不是跳轉b
f. 結束micro task隊列執行

跳轉到1

示例

實戰

猜想

在macro/micro task 進入執行棧時,中間應該會有一個緩存區,
例如

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

示例

參考資料

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

Make a friend

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96514.html

OpenJDK9 Hotspot：Zero 解釋器初探

摘要：準備工作假設源代碼目錄為編譯時啟用了解釋器參考編譯和調試調用棧先在函數參考虛擬機入口中設斷點，然后在的方法中設置斷點通過宏獲取當前，然后創建第個棧幀，然后進入解釋執行字節碼準備工作假設 openjdk 源代碼目錄為 jdk9dev 編譯 openjdk 時啟用了 zero 解釋器（參考 OpenJDK9 Hotspot Mac OSX 編譯和調試）調用棧先在 JavaMai...

zhangqh 2019-08-14 15:39 評論0 收藏0
Log4j DailyRollingFileAppender源碼初探

摘要：是否覆蓋目標文件名是否緩沖默認緩沖區大小既然緩沖了，那意味著父類中的刷新控制為不進行同步刷新利用父類中的字節流字符流轉換方法實例化父類中的實際在上面指向了文件輸出流繼承，將文件進行日常轉存。瞎扯 Log4j對Java開發者來說是經常使用到的日志框架，我每次使用都對它的配置文件頭大，網上搜一個別人的例子自己改巴改巴，草草了事。再次使用時，又忘了怎么回事了。這次突然來了興趣，想看看它具體...

warkiz 2019-08-14 14:57 評論0 收藏0
解讀React源碼(一):初探React源碼

摘要：前言的基本概念組件的構建方法以及高級用法這背后的一切如何運轉深入內部的實現機制和原理初探源碼代碼組織結構包含一系列的工具方法插件包含一系列同構方法包含一些公用或常用方法如等包含一些測試方法等包含一些邊界錯誤的測試用例是代碼的核心部分它包含了前言 React的基本概念,API,組件的構建方法以及高級用法,這背后的一切如何運轉,深入Virtual DOM內部的實現機制和原理. 初探Rea...

Eminjannn 2019-08-20 18:31 評論0 收藏0
JS與Node.js中的事件循環

摘要：的單線程，與它的用途有關。特點的顯著特點異步機制事件驅動。隊列的讀取輪詢線程，事件的消費者，的主角。它將不同的任務分配給不同的線程，形成一個事件循環，以異步的方式將任務的執行結果返回給引擎。這兩天跟同事同事討論遇到的一個問題，js中的event loop，引出了chrome與node中運行具有setTimeout和Promise的程序時候執行結果不一樣的問題，從而引出了Nodejs的...

abson 2019-08-22 11:14 評論0 收藏0
webpack-hot-middleware初探

摘要：一直感覺的特性挺神奇，所以這里初步探究下，這個模塊首先地址，，當前版本為，為了配合吧，肯定也做了些更新，不過這個是個非官方的庫。一直感覺hot module replacement的特性挺神奇，所以這里初步探究下webpack-hot-middleware，這個模塊首先地址，https://github.com/glenjamin/...，當前版本為2.13.2，為了配合webpa...

lijy91 2019-08-21 11:22 評論0 收藏0