イベントloop原理、マクロタスク、nodeとブラウザがloopを実現する時の違い

1825 ワード

  • イベントサイクルとマクロタスクについて、この文章ではっきりと述べています.
    https://blog.csdn.net/Liu_yunzhao/articale/detail/90734257
    文でコードの実行順序を述べます.
    console.log("script start");
    
    new Promise(function (resolve) {
      console.log("promise1");
      resolve();
    }).then(function () {
      console.log("promise1-then");
    });
    
    setTimeout(function () {
      console.log("settimeout1");
    }, 0);
    
    async function async1() {
      console.log("async1 start");
      let resulet = await async2();
      console.log(resulet);
      console.log("async1 end");
    }
    
    async function async2() {
      console.log('async2');
      return "async2 return"
    }
    
    setTimeout(function () {
      console.log("settimeout2");
    }, 0);
    
    async1();
    
    new Promise(function (resolve) {
      console.log("promise2");
      resolve();
    }).then(function () {
      console.log("promise2-then");
    });
    
    console.log('script end');
    
    nodeではブラウザと異なります.// nodejs
    script start
    promise1
    async1 start
    async2
    promise2
    script end
    promise1-then
    promise2-then
    async2 return
    async1 end
    settimeout1
    settimeout2
    
    // chrome
    script start
    VM7991:4 promise1
    VM7991:15 async1 start
    VM7991:22 async2
    VM7991:33 promise2
    VM7991:39 script end
    VM7991:7 promise1-then
    VM7991:17 async2 return
    VM7991:18 async1 end
    VM7991:36 promise2-then
    undefined
    VM7991:11 settimeout1
    VM7991:27 settimeout2
    asyncの順序が違っていることが見られます.この問題については、新旧バージョンv 8の最適化方式の違いによって、この文章がよく分かります.https://www.zhihu.com/question/268007969/answer/341146726の古い言い方はasync 2のコンサート前にawaitの2つのシーンを加えたら結果は同じです.