欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript中Microtask和Macrotask鮮為人知的知識(shí)點(diǎn)

 更新時(shí)間:2022年04月01日 17:27:54   作者:HorstXu  
這篇文章主要為大家介紹了Javascript中Microtask和Macrotask鮮為人知的知識(shí)點(diǎn)講解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步早日升職加薪

首先我們來(lái)看一道題目,如下javascript代碼,執(zhí)行后會(huì)在控制臺(tái)打印出什么內(nèi)容?

async function async1() {
   console.log('async1 start');
   await async2();
   console.log('async1 end');
 }
 async function async2() {
   console.log('async2 start');
   return new Promise((resolve, reject) => {
     resolve();
     console.log('async2 promise');
   })
 }
 console.log('script start');
 setTimeout(function() {
   console.log('setTimeout');
 }, 0);  
 async1();
 new Promise(function(resolve) {
   console.log('promise1');
   resolve();
 }).then(function() {
   console.log('promise2');
 }).then(function() {
   console.log('promise3');
 });
 console.log('script end')

說(shuō)實(shí)話,真正能在面試中把這道題目答對(duì)的前端工程師鳳毛麟角。我們先來(lái)瞧一下答案吧。把以上代碼存到test.js文件中,并用node執(zhí)行一下,結(jié)果如下:

如果把以上代碼貼到一個(gè)網(wǎng)頁(yè)中的script標(biāo)簽里面,然后打開(kāi)這個(gè)網(wǎng)頁(yè),再打開(kāi)控制臺(tái),可以看到如下輸出(Chrome 64位 63.0.3239.84):

結(jié)果和node打印的一模一樣。那么為什么是這個(gè)順序呢?

我們都知道js的單線程特性(html5的web worker不算在內(nèi)~)以及良好的異步支持。在單線程的前提下,異步任務(wù)到底什么時(shí)候開(kāi)始執(zhí)行,其實(shí)是有兩個(gè)隊(duì)列來(lái)進(jìn)行管理,即Macrotask和Microtask(只有一個(gè)字母的差距,不要認(rèn)錯(cuò)……)。在當(dāng)前正在執(zhí)行的線程中,如果碰到屬于Macrotask的異步任務(wù),則放入Macrotask隊(duì)列;碰到Microtask的異步任務(wù)則放入Microtask隊(duì)列。注意這里只是把任務(wù)放入隊(duì)列,并不會(huì)執(zhí)行它。等到當(dāng)前主線程任務(wù)執(zhí)行完畢之后,會(huì)依次從Microtask隊(duì)列中取出任務(wù)執(zhí)行,在執(zhí)行期間當(dāng)然還是遵循碰到異步任務(wù)放入相應(yīng)隊(duì)列的原則。等到Microtask任務(wù)全部執(zhí)行過(guò)了,此時(shí)再?gòu)腗acrotask隊(duì)列中取出一個(gè)任務(wù)執(zhí)行。

屬于Macrotask的任務(wù)有:

setTimeout,setInteveral,script標(biāo)簽,I/O,UI渲染

屬于Microtask的任務(wù)有:

Promise,async/await,process.nextTick,Object.observe,MutationObserver

(事實(shí)上,即使同樣是Microtask,內(nèi)部也是有優(yōu)先級(jí)的差別的,例如NodeJS的實(shí)現(xiàn)上,process.nextTick比Promise要先執(zhí)行。相關(guān)問(wèn)題可以瞧瞧這個(gè)連接:https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/ 。反正我瞧到一半就放棄了,好在async/await和Promise沒(méi)有優(yōu)先級(jí)差別)

然后我們來(lái)分析一下本題中的執(zhí)行順序:

【1】第15行執(zhí)行,打印出script start

【2】第16至18行,把回調(diào)任務(wù)放入Macrotask (目前Macrotask:第16行setTimeout,Microtask:空)

【3】第20行,執(zhí)行async1函數(shù),先打印出第2行的async1 start

【4】第3行的async2先執(zhí)行,打印出第8行的async2 start

【5】第9行至第12行遇到Promise,先打印出第11行的async2 promise(注意不管你resolve寫(xiě)在new Promise的函數(shù)什么位置,都跟寫(xiě)到最后一句一樣?。?/p>

【6】第3行的async2返回了Promise,并且async2前面有await修飾,因此后面第4行的任務(wù)被放到Microtask(目前Macrotask:第16行setTimeout,Microtask:第4行)

【7】第22至25行,打印出promise1,并把第26行放入Microtask,注意第28行還沒(méi)執(zhí)行到,所以這行什么都不做(目前Macrotask:第16行setTimeout,Microtask:第4行,第26行)

【8】第30行打印script end(目前Macrotask:第16行setTimeout,Microtask:第4行,第26行)

【9】腳本主線程執(zhí)行結(jié)束,現(xiàn)在拿出來(lái)一個(gè)Microtask,即第4行,打印async1 end(目前Macrotask:第16行setTimeout,Microtask:第26行)

【10】再拿出來(lái)一個(gè)Microtask,即第26行,打印promise2,此時(shí)由于第26行后面跟著then,所以把第28行插入Microtask(目前Macrotask:第16行setTimeout,Microtask:第28行)

【11】再拿出來(lái)一個(gè)Microtask,即第28行,打印promise3(目前Macrotask:第16行的setTimeout,Microtask:空)

【12】Microtask沒(méi)有了,執(zhí)行下一個(gè)Macrotask,即第16行的setTimeout,打印setTimeout,結(jié)束

需要注意的是,以下兩種寫(xiě)法,效果是一模一樣的(resolve的位置無(wú)所謂):

寫(xiě)法1:
new Promise((resolve, reject) => {
  console.log('1111');
  resolve();
  console.log('2222');
});
 
寫(xiě)法2:
new Promise((resolve, reject) => {
  console.log('1111');
  console.log('2222');
  resolve();
});

另外,對(duì)于Promise的鏈?zhǔn)秸{(diào)用,如new Promise(....).then(...).then(...)....,一次只放第一個(gè)then的內(nèi)容進(jìn)入Microtask,等第一個(gè)then執(zhí)行的時(shí)候,會(huì)把第二個(gè)then放入Microtask,而不是一次把兩個(gè)then都放進(jìn)去。

以上就是Javascript中Microtask和Macrotask鮮為人知的知識(shí)點(diǎn)的詳細(xì)內(nèi)容,更多關(guān)于Javascript中Microtask和Macrotask的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評(píng)論