成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

瀏覽器的微任務(wù)MicroTask和宏任務(wù)MacroTask

v1 / 3076人閱讀

摘要：簡(jiǎn)介我把在瀏覽器中運(yùn)行主要分為以下幾種類(lèi)型的任務(wù)同步任務(wù)同步任務(wù)是指按照正常順序執(zhí)行的代碼，比如函數(shù)調(diào)用，數(shù)值運(yùn)算等等，只要是執(zhí)行后立即能夠得到結(jié)果的就是同步任務(wù)。取出微任務(wù)隊(duì)列中的任務(wù)執(zhí)行，直到隊(duì)列被完全清空重復(fù)和，直到宏任務(wù)隊(duì)列被清空。

簡(jiǎn)介

? 我把JavaScript在瀏覽器中運(yùn)行主要分為以下幾種類(lèi)型的任務(wù)：

同步任務(wù)（MainTask） ：同步任務(wù)是指JavaScript按照正常順序執(zhí)行的代碼，比如：函數(shù)調(diào)用，數(shù)值運(yùn)算等等，只要是執(zhí)行后立即能夠得到結(jié)果的就是同步任務(wù)。

宏任務(wù) （MacroTask）：setTimeout、setInterval、I/O、UI渲染

微任務(wù) （MicroTask） ：Promise、Object.obsever、MutationObsever

用戶交互事件（User Interaction Event）：點(diǎn)擊事件onclick、鍵盤(pán)事件onkeywodn、鼠標(biāo)事件onmouseover等等

執(zhí)行順序

具體流程：

執(zhí)行完主邏輯中的同步任務(wù)

取出微任務(wù)隊(duì)列（MicroTask Queue）中的任務(wù)執(zhí)行，直到隊(duì)列被完全清空

取出宏任務(wù)隊(duì)列（MacroTask Queue）中的一個(gè)任務(wù)執(zhí)行。

取出微任務(wù)隊(duì)列（MicroTask Queue）中的任務(wù)執(zhí)行，直到隊(duì)列被完全清空

重復(fù) 3 和 4，直到宏任務(wù)隊(duì)列（MacroTask Queue）被清空。

demo1：宏任務(wù)(MacroTask)和微任務(wù)(MicroTask)執(zhí)行順序

demo1.html




    
    demo1：宏任務(wù)(MacroTask)和微任務(wù)(MicroTask)執(zhí)行順序

運(yùn)行結(jié)果：

以上代碼詳細(xì)的運(yùn)行步驟隊(duì)列圖，我已經(jīng)寫(xiě)成了PPT，大家可以下載打開(kāi)看效果，可以詳細(xì)了解每一段代碼在隊(duì)列中的樣子：

https://github.com/Jameswain/...

demo2：setInterval —— setTimeout的語(yǔ)法糖

? setInterval其實(shí)可以說(shuō)是setTimeout的語(yǔ)法糖，因?yàn)閟etInterval能夠?qū)崿F(xiàn)的功能，setTimeout也能實(shí)現(xiàn)，下面通過(guò)一個(gè)小例子實(shí)現(xiàn)使用setTimeout實(shí)現(xiàn)setInterval的定時(shí)調(diào)度功能：

function logic() {
    console.log(Date.now());
    setTimeout(logic, 1000);
}
logic();
demo3：setInterval宏任務(wù)和微任務(wù)深入 



    
    demo1：setTimeout與setInterval


    
demo

運(yùn)行結(jié)果：

? 從運(yùn)行結(jié)果可以發(fā)現(xiàn)，JavaScript的代碼在瀏覽器中的執(zhí)行順序是【同步任務(wù)】 => 【清空微任務(wù)隊(duì)列】=>【宏任務(wù)】=> 【清空微任務(wù)隊(duì)列】，如果在執(zhí)行微任務(wù)時(shí)，又發(fā)現(xiàn)了微任務(wù)，它會(huì)把這個(gè)微任務(wù)放入到微任務(wù)隊(duì)列的末尾。宏任務(wù)也一樣，如果在執(zhí)行宏任務(wù)的時(shí)候發(fā)現(xiàn)了宏任務(wù)，它也會(huì)把這個(gè)宏任務(wù)放入宏任務(wù)隊(duì)列的末尾。

? 上代碼詳細(xì)的運(yùn)行步驟隊(duì)列圖，我已經(jīng)寫(xiě)成了PPT，大家可以下載打開(kāi)看效果，可以詳細(xì)了解每一段代碼在隊(duì)列中的樣子：

https://github.com/Jameswain/...

參考文檔：

Tasks, microtasks, queues 和 schedules

Tasks, microtasks, queues and schedules

瀏覽器和Node不同的事件循環(huán)（Event Loop）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104063.html

相關(guān)文章

  • 【Vue源碼】Vue中DOM的異步更新策略以及nextTick機(jī)制

    摘要：本篇文章主要是對(duì)中的異步更新策略和機(jī)制的解析，需要讀者有一定的使用經(jīng)驗(yàn)并且熟悉掌握事件循環(huán)模型。這個(gè)結(jié)果足以說(shuō)明中的更新并非同步。二是把回調(diào)函數(shù)放入一個(gè)隊(duì)列，等待適當(dāng)?shù)臅r(shí)機(jī)執(zhí)行。通過(guò)的主動(dòng)來(lái)觸發(fā)的事件，進(jìn)而把回調(diào)函數(shù)作為參與事件循環(huán)。 本篇文章主要是對(duì)Vue中的DOM異步更新策略和nextTick機(jī)制的解析，需要讀者有一定的Vue使用經(jīng)驗(yàn)并且熟悉掌握J(rèn)avaScript事件循環(huán)模型。 ...

    selfimpr 評(píng)論0 收藏0

  • Eventloop不可怕，可怕的是遇上Promise

    摘要：就是每次傳入的函數(shù)最后是的任務(wù)之后，開(kāi)始執(zhí)行，可以看到此時(shí)會(huì)批量執(zhí)行中的函數(shù)，而且還給這些中回調(diào)函數(shù)放入了一個(gè)這個(gè)很顯眼的函數(shù)之中，表示這些回調(diào)函數(shù)是在微任務(wù)中執(zhí)行的。下一模塊會(huì)對(duì)此微任務(wù)中的插隊(duì)行為進(jìn)行詳解。 有關(guān)Eventloop+Promise的面試題大約分以下幾個(gè)版本——得心應(yīng)手版、游刃有余版、爐火純青版、登峰造極版和究極變態(tài)版。假設(shè)小伙伴們戰(zhàn)到最后一題，以后遇到此類(lèi)問(wèn)題，都是...

    olle 評(píng)論0 收藏0

  • JavaScript執(zhí)行機(jī)制

    摘要：事件循環(huán)事件循環(huán)是實(shí)現(xiàn)異步的一種方法，也是的執(zhí)行機(jī)制。最后的最后是一門(mén)單線程語(yǔ)言是的執(zhí)行機(jī)制部分內(nèi)容轉(zhuǎn)自 1.單線程 javascript是一門(mén)單線程語(yǔ)言 2.javascript事件循環(huán) 同步任務(wù) 異步任務(wù) showImg(https://segmentfault.com/img/bVbufUd?w=1268&h=1062);除了廣義的同步任務(wù)和異步任務(wù)，我們對(duì)任務(wù)有更精細(xì)的定義...

    ralap 評(píng)論0 收藏0

  • 帶你徹底弄懂Event Loop

    前言 我在學(xué)習(xí)瀏覽器和NodeJS的Event Loop時(shí)看了大量的文章，那些文章都寫(xiě)的很好，但是往往是每篇文章有那么幾個(gè)關(guān)鍵的點(diǎn)，很多篇文章湊在一起綜合來(lái)看，才可以對(duì)這些概念有較為深入的理解。 于是，我在看了大量文章之后，想要寫(xiě)這么一篇博客，不采用官方的描述，結(jié)合自己的理解以及示例代碼，用最通俗的語(yǔ)言表達(dá)出來(lái)。希望大家可以通過(guò)這篇文章，了解到Event Loop到底是一種什么機(jī)制，瀏覽器和Nod...

    hersion 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<