摘要:簡介我把在瀏覽器中運行主要分為以下幾種類型的任務同步任務同步任務是指按照正常順序執行的代碼,比如函數調用,數值運算等等,只要是執行后立即能夠得到結果的就是同步任務。取出微任務隊列中的任務執行,直到隊列被完全清空重復和,直到宏任務隊列被清空。
簡介
? 我把JavaScript在瀏覽器中運行主要分為以下幾種類型的任務:
同步任務(MainTask) :同步任務是指JavaScript按照正常順序執行的代碼,比如:函數調用,數值運算等等,只要是執行后立即能夠得到結果的就是同步任務。
宏任務 (MacroTask):setTimeout、setInterval、I/O、UI渲染
微任務 (MicroTask) :Promise、Object.obsever、MutationObsever
用戶交互事件(User Interaction Event):點擊事件onclick、鍵盤事件onkeywodn、鼠標事件onmouseover等等
執行順序具體流程:
執行完主邏輯中的同步任務
取出微任務隊列(MicroTask Queue)中的任務執行,直到隊列被完全清空
取出宏任務隊列(MacroTask Queue)中的一個任務執行。
取出微任務隊列(MicroTask Queue)中的任務執行,直到隊列被完全清空
重復 3 和 4,直到宏任務隊列(MacroTask Queue)被清空。
demo1:宏任務(MacroTask)和微任務(MicroTask)執行順序demo1.html
demo1:宏任務(MacroTask)和微任務(MicroTask)執行順序
運行結果:
以上代碼詳細的運行步驟隊列圖,我已經寫成了PPT,大家可以下載打開看效果,可以詳細了解每一段代碼在隊列中的樣子:
https://github.com/Jameswain/...
demo2:setInterval —— setTimeout的語法糖? setInterval其實可以說是setTimeout的語法糖,因為setInterval能夠實現的功能,setTimeout也能實現,下面通過一個小例子實現使用setTimeout實現setInterval的定時調度功能:
function logic() { console.log(Date.now()); setTimeout(logic, 1000); } logic();demo3:setInterval宏任務和微任務深入
demo1:setTimeout與setInterval demo
運行結果:
? 從運行結果可以發現,JavaScript的代碼在瀏覽器中的執行順序是【同步任務】 => 【清空微任務隊列】=>【宏任務】=> 【清空微任務隊列】,如果在執行微任務時,又發現了微任務,它會把這個微任務放入到微任務隊列的末尾。宏任務也一樣,如果在執行宏任務的時候發現了宏任務,它也會把這個宏任務放入宏任務隊列的末尾。
? 上代碼詳細的運行步驟隊列圖,我已經寫成了PPT,大家可以下載打開看效果,可以詳細了解每一段代碼在隊列中的樣子:
https://github.com/Jameswain/...
參考文檔:
Tasks, microtasks, queues 和 schedules
Tasks, microtasks, queues and schedules
瀏覽器和Node不同的事件循環(Event Loop)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/104063.html
摘要:本篇文章主要是對中的異步更新策略和機制的解析,需要讀者有一定的使用經驗并且熟悉掌握事件循環模型。這個結果足以說明中的更新并非同步。二是把回調函數放入一個隊列,等待適當的時機執行。通過的主動來觸發的事件,進而把回調函數作為參與事件循環。 本篇文章主要是對Vue中的DOM異步更新策略和nextTick機制的解析,需要讀者有一定的Vue使用經驗并且熟悉掌握JavaScript事件循環模型。 ...
摘要:就是每次傳入的函數最后是的任務之后,開始執行,可以看到此時會批量執行中的函數,而且還給這些中回調函數放入了一個這個很顯眼的函數之中,表示這些回調函數是在微任務中執行的。下一模塊會對此微任務中的插隊行為進行詳解。 有關Eventloop+Promise的面試題大約分以下幾個版本——得心應手版、游刃有余版、爐火純青版、登峰造極版和究極變態版。假設小伙伴們戰到最后一題,以后遇到此類問題,都是...
摘要:事件循環事件循環是實現異步的一種方法,也是的執行機制。最后的最后是一門單線程語言是的執行機制部分內容轉自 1.單線程 javascript是一門單線程語言 2.javascript事件循環 同步任務 異步任務 showImg(https://segmentfault.com/img/bVbufUd?w=1268&h=1062);除了廣義的同步任務和異步任務,我們對任務有更精細的定義...
前言 我在學習瀏覽器和NodeJS的Event Loop時看了大量的文章,那些文章都寫的很好,但是往往是每篇文章有那么幾個關鍵的點,很多篇文章湊在一起綜合來看,才可以對這些概念有較為深入的理解。 于是,我在看了大量文章之后,想要寫這么一篇博客,不采用官方的描述,結合自己的理解以及示例代碼,用最通俗的語言表達出來。希望大家可以通過這篇文章,了解到Event Loop到底是一種什么機制,瀏覽器和Nod...
閱讀 1047·2021-11-22 15:33
閱讀 3357·2021-11-08 13:20
閱讀 1368·2021-09-22 10:55
閱讀 2052·2019-08-29 11:08
閱讀 770·2019-08-26 12:24
閱讀 3068·2019-08-23 17:15
閱讀 2224·2019-08-23 16:12
閱讀 1932·2019-08-23 16:09