国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

瀏覽器的微任務MicroTask和宏任務MacroTask

v1 / 3067人閱讀

摘要:簡介我把在瀏覽器中運行主要分為以下幾種類型的任務同步任務同步任務是指按照正常順序執行的代碼,比如函數調用,數值運算等等,只要是執行后立即能夠得到結果的就是同步任務。取出微任務隊列中的任務執行,直到隊列被完全清空重復和,直到宏任務隊列被清空。

簡介

? 我把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源碼】Vue中DOM的異步更新策略以及nextTick機制

    摘要:本篇文章主要是對中的異步更新策略和機制的解析,需要讀者有一定的使用經驗并且熟悉掌握事件循環模型。這個結果足以說明中的更新并非同步。二是把回調函數放入一個隊列,等待適當的時機執行。通過的主動來觸發的事件,進而把回調函數作為參與事件循環。 本篇文章主要是對Vue中的DOM異步更新策略和nextTick機制的解析,需要讀者有一定的Vue使用經驗并且熟悉掌握JavaScript事件循環模型。 ...

    selfimpr 評論0 收藏0
  • Eventloop不可怕,可怕的是遇上Promise

    摘要:就是每次傳入的函數最后是的任務之后,開始執行,可以看到此時會批量執行中的函數,而且還給這些中回調函數放入了一個這個很顯眼的函數之中,表示這些回調函數是在微任務中執行的。下一模塊會對此微任務中的插隊行為進行詳解。 有關Eventloop+Promise的面試題大約分以下幾個版本——得心應手版、游刃有余版、爐火純青版、登峰造極版和究極變態版。假設小伙伴們戰到最后一題,以后遇到此類問題,都是...

    olle 評論0 收藏0
  • JavaScript執行機制

    摘要:事件循環事件循環是實現異步的一種方法,也是的執行機制。最后的最后是一門單線程語言是的執行機制部分內容轉自 1.單線程 javascript是一門單線程語言 2.javascript事件循環 同步任務 異步任務 showImg(https://segmentfault.com/img/bVbufUd?w=1268&h=1062);除了廣義的同步任務和異步任務,我們對任務有更精細的定義...

    ralap 評論0 收藏0
  • 帶你徹底弄懂Event Loop

    前言 我在學習瀏覽器和NodeJS的Event Loop時看了大量的文章,那些文章都寫的很好,但是往往是每篇文章有那么幾個關鍵的點,很多篇文章湊在一起綜合來看,才可以對這些概念有較為深入的理解。 于是,我在看了大量文章之后,想要寫這么一篇博客,不采用官方的描述,結合自己的理解以及示例代碼,用最通俗的語言表達出來。希望大家可以通過這篇文章,了解到Event Loop到底是一種什么機制,瀏覽器和Nod...

    hersion 評論0 收藏0

發表評論

0條評論

v1

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<