深入理解JS中的微任务和宏任务的执行顺序及应用场景

// 代码块1
setTimeout(function() {   //宏任务1
  console.log('1');
});
new Promise(function(resolve) {
  console.log('2'); //同步任务1
  resolve();
}).then(function() {   //微任务1
  console.log('3');
});
console.log('4'); //同步任务2
// 代码块2
setTimeout(function() {   //宏任务2
  console.log('5'); //宏任务2中的同步任务
  new Promise(function(resolve) {
    console.log('6'); //宏任务2中的同步任务
    new Promise(function(resolve) {      //宏任务2中的微任务
      console.log('x1');
      resolve();
    }).then(function() {
      console.log('X2');
    });
    setTimeout(function() {       //宏任务2中的宏任务
      console.log('X3');
      new Promise(function(resolve) {         //宏任务2中的宏任务中的同步任务
        console.log('X4');
        resolve();
      }).then(function() {        //宏任务2中的宏任务中的微任务
        console.log('X5');
      });
    });
    resolve();
  }).then(function() {    //宏任务2中的微任务
    console.log('7');
  });
});
// 代码块3
setTimeout(function() {  //宏任务3
  console.log('8');
});
//（对于这段代码node环境和浏览器环境输出一致）
//输出答案：2,4,3,1,5,6,x1,x2,7,8,x3,x4,x5

setTimeout(function() {   //宏任务2
  console.log('5'); //宏任务2中的同步任务
  new Promise(function(resolve) {
    console.log('6'); //宏任务2中的同步任务
    new Promise(function(resolve) {      //宏任务2中的微任务
      console.log('x1');
      resolve();
    }).then(function() {
      console.log('X2');
    });
    setTimeout(function() {       //宏任务2中的宏任务
      console.log('X3');
      new Promise(function(resolve) {         //宏任务2中的宏任务中的同步任务
        console.log('X4');
        resolve();
      }).then(function() {        //宏任务2中的宏任务中的微任务
        console.log('X5');
      });
    });
   setTimeout(function() {       //宏任务2中的宏任务
      console.log('X6');
      new Promise(function(resolve) {         //宏任务2中的宏任务中的同步任务
        console.log('X7');
        resolve();
      }).then(function() {        //宏任务2中的宏任务中的微任务
        console.log('X8');
      });
    });
    resolve();
  }).then(function() {    //宏任务2中的微任务
    console.log('7');
  });
});
// 5,6,X1,X27,X3,X4,X5,X6,X7,X8