摘要:的事件機(jī)制關(guān)于,查閱多篇博客,或多或少總有些出入,在此寫下自己關(guān)于的理解按同步與異步分首先判斷是同步還是異步同步就進(jìn)入主進(jìn)程異步就進(jìn)入異步任務(wù)在中注冊函數(shù)當(dāng)滿足觸發(fā)條件后被推入同步任務(wù)進(jìn)入主線程后一直執(zhí)行直到主線程空閑時才會去中查看是否有可
JavaScript 的事件機(jī)制
關(guān)于Event Loop,查閱多篇博客,或多或少總有些出入,在此寫下自己關(guān)于Event Loop的理解按同步與異步分
首先判斷JS是同步還是異步,同步就進(jìn)入主進(jìn)程,異步就進(jìn)入event table
異步任務(wù)在event table中注冊函數(shù),當(dāng)滿足觸發(fā)條件后,被推入event queue
同步任務(wù)進(jìn)入主線程后一直執(zhí)行,直到主線程空閑時,才會去event queue中查看是否有可執(zhí)行的異步任務(wù),如果有就推入主進(jìn)程中
按宏任務(wù)與微任務(wù)分 (更準(zhǔn)確)macro-task(宏任務(wù)):包括整體代碼script,setTimeout,setInterval,setImmediate, I/O, UI rendering
micro-task(微任務(wù)):Promise.then,process.nextTick
許多地方把Promise標(biāo)記為微任務(wù),但是這容易讓人誤以為new Promise的時候這個過程是個微任務(wù)。其實是Promsie.then、Promise.catch是微任務(wù),new Promise的時候當(dāng)做普通的生成對象來看待,所以在此我標(biāo)記為Promise.then
執(zhí)行本輪個宏任務(wù)
過程中如果遇到微任務(wù),是同步任務(wù)就將其放到微任務(wù)的[事件隊列]里,異步放入微任務(wù)[事件表]中,注冊函數(shù),達(dá)到執(zhí)行條件,推入微任務(wù)[事件隊列]中 (目前為止我還不知道微任務(wù)有沒有異步任務(wù))
遇到宏任務(wù),是同步任務(wù)就將其放到宏任務(wù)的[事件隊列]里,異步放入宏任務(wù)[事件表]中,注冊函數(shù),達(dá)到執(zhí)行條件,推入宏任務(wù)[事件隊列]中
本輪宏任務(wù)執(zhí)行完,查看微任務(wù)的[事件隊列],并將里面全部的微任務(wù)依次執(zhí)行完,從宏任務(wù)[事件隊列]中執(zhí)行下一輪宏任務(wù)
相關(guān)知識JS單線程,這線程中只有一個唯一的事件循環(huán)
一個線程中,事件循環(huán)是唯一的,但是可以有多個任務(wù)隊列(微任務(wù)隊列只有一個)
任務(wù)隊列分宏任務(wù)隊列與微任務(wù)隊列
那么問題來了,多個宏任務(wù)隊列時,下一趟的宏任務(wù)該取哪個呢?上述方法中,我是將宏任務(wù)都看成一個隊列的Examples
/* example1 */ setTimeout(function () { console.log(1); },7); new Promise(function (resolve) { console.log(2); for (var i = 0; i < 10000; i++) { i == 99 && resolve(); } }).then(function () { console.log(3); setTimeout(() => { console.log(4); }); }) console.log(5); // 2 3 5 (4 1) 后兩個數(shù)字的順序與兩定時器的delayTime有關(guān),誰先滿足觸發(fā)條件就先輸出誰 (html5 標(biāo)準(zhǔn)中,規(guī)定delayTime >= 4ms) /* example2 */ setTimeout(_ => console.log(4)); new Promise(resolve => { resolve() console.log(1) }).then(_ => { console.log(3) Promise.resolve().then(_ => { console.log("before timeout") }).then(_ => { Promise.resolve().then(_ => { console.log("also before timeout") }) }) }) console.log(2); // 這個也不難,分析分析就出結(jié)果了finally
綜上 菜雞二問
微任務(wù)事件隊列中存在異步任務(wù)嘛?
多個宏任務(wù)事件隊列,下一輪宏任務(wù)時該從哪個宏任務(wù)事件隊列中取?
這些問題都需在不斷的深入了解中才能知道答案
以上就是閱讀多篇博客之后個人對Event Loop的一些見解,或有不正確之處,望批評指正
參考
前端基礎(chǔ)進(jìn)階(十二):深入核心,詳解事件循環(huán)機(jī)制
10分鐘理解JS引擎的執(zhí)行機(jī)制
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/97057.html
摘要:異步任務(wù)必須指定回調(diào)函數(shù),當(dāng)異步任務(wù)從任務(wù)隊列回到執(zhí)行棧,回調(diào)函數(shù)就會執(zhí)行。事件循環(huán)主線程從任務(wù)隊列中讀取事件,這個過程是循環(huán)不斷的,所以整個的這種運(yùn)行機(jī)制又稱為。事件循環(huán)事件循環(huán)是指主線程重復(fù)從消息隊列中取消息執(zhí)行的過程。 參考鏈接:這一次,徹底弄懂 JavaScript 執(zhí)行機(jī)制https://zhuanlan.zhihu.com/p/...從瀏覽器多進(jìn)程到JS單線程,JS運(yùn)行機(jī)制...
摘要:主線程不斷重復(fù)上面的三步,此過程也就是常說的事件循環(huán)。所以主線程代碼執(zhí)行時間過長,會阻塞事件循環(huán)的執(zhí)行。參考資料這一次,徹底弄懂執(zhí)行機(jī)制任務(wù)隊列的順序機(jī)制事件循環(huán)搞懂異步事件輪詢與中的事件循環(huán) 1. 說明 讀過本文章后,您能知道: JavaScript代碼在瀏覽器中的執(zhí)行機(jī)制和事件循環(huán) 面試中經(jīng)常遇到的代碼輸出順序問題 首先通過一段代碼來驗證你是否了解代碼輸出順序,如果你不知道輸出...
摘要:從異步過程的角度看,函數(shù)就是異步過程的發(fā)起函數(shù),事件監(jiān)聽函數(shù)就是異步過程的回調(diào)函數(shù)。事件觸發(fā)時,表示異步任務(wù)完成,會將事件監(jiān)聽器函數(shù)封裝成一條消息放到消息隊列中,等待主線程執(zhí)行。 1.為什么JavaScript是單線程? JavaScript語言的一大特點就是單線程,也就是說,同一個時間只能做一件事。那么,為什么JavaScript不能有多個線程呢?這樣能提高效率啊。JavaScrip...
摘要:機(jī)制詳解與中實踐應(yīng)用歸納于筆者的現(xiàn)代開發(fā)語法基礎(chǔ)與實踐技巧系列文章。事件循環(huán)機(jī)制詳解與實踐應(yīng)用是典型的單線程單并發(fā)語言,即表示在同一時間片內(nèi)其只能執(zhí)行單個任務(wù)或者部分代碼片。 JavaScript Event Loop 機(jī)制詳解與 Vue.js 中實踐應(yīng)用歸納于筆者的現(xiàn)代 JavaScript 開發(fā):語法基礎(chǔ)與實踐技巧系列文章。本文依次介紹了函數(shù)調(diào)用棧、MacroTask 與 Micr...
摘要:的單線程,與它的用途有關(guān)。特點的顯著特點異步機(jī)制事件驅(qū)動。隊列的讀取輪詢線程,事件的消費(fèi)者,的主角。它將不同的任務(wù)分配給不同的線程,形成一個事件循環(huán),以異步的方式將任務(wù)的執(zhí)行結(jié)果返回給引擎。 這兩天跟同事同事討論遇到的一個問題,js中的event loop,引出了chrome與node中運(yùn)行具有setTimeout和Promise的程序時候執(zhí)行結(jié)果不一樣的問題,從而引出了Nodejs的...
摘要:如果當(dāng)前沒有事件也沒有定時器事件,則返回。相關(guān)資料關(guān)于的架構(gòu)及設(shè)計思路的事件討論了使用線程池異步運(yùn)行代碼。下一篇初窺事件機(jī)制的實現(xiàn)二中定時器的實現(xiàn) 在瀏覽器中,事件作為一個極為重要的機(jī)制,給予JavaScript響應(yīng)用戶操作與DOM變化的能力;在Node.js中,事件驅(qū)動模型則是其高并發(fā)能力的基礎(chǔ)。 學(xué)習(xí)JavaScript也需要了解它的運(yùn)行平臺,為了更好的理解JavaScript的事...
閱讀 2959·2021-11-15 11:39
閱讀 1554·2021-08-19 10:56
閱讀 1120·2019-08-30 14:12
閱讀 3770·2019-08-29 17:29
閱讀 741·2019-08-29 16:21
閱讀 3443·2019-08-26 12:22
閱讀 1541·2019-08-23 16:30
閱讀 1049·2019-08-23 15:25