亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

v1 / 3228人閱讀

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

簡介

? 我把JavaScript在瀏覽器中運(yùn)行主要分為以下幾種類型的任務(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）：點擊事件onclick、鍵盤事件onkeywodn、鼠標(biāo)事件onmouseover等等

執(zhí)行順序

具體流程：

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

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

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

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

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

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

demo1.html




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

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

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

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

demo2：setInterval —— setTimeout的語法糖

? setInterval其實可以說是setTimeout的語法糖，因為setInterval能夠?qū)崿F(xiàn)的功能，setTimeout也能實現(xiàn)，下面通過一個小例子實現(xiàn)使用setTimeout實現(xiàn)setInterval的定時調(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ù)隊列】=>【宏任務(wù)】=> 【清空微任務(wù)隊列】，如果在執(zhí)行微任務(wù)時，又發(fā)現(xiàn)了微任務(wù)，它會把這個微任務(wù)放入到微任務(wù)隊列的末尾。宏任務(wù)也一樣，如果在執(zhí)行宏任務(wù)的時候發(fā)現(xiàn)了宏任務(wù)，它也會把這個宏任務(wù)放入宏任務(wù)隊列的末尾。

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

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

參考文檔：

Tasks, microtasks, queues 和 schedules

Tasks, microtasks, queues and schedules

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/104063.html

相關(guān)文章

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

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

    selfimpr 評論0 收藏0

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

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

    olle 評論0 收藏0

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

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

    ralap 評論0 收藏0

  • 帶你徹底弄懂Event Loop

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

    hersion 評論0 收藏0

發(fā)表評論

0條評論

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