微任务和宏任务的区别及具体场景

Posted 2023-03-08 suwu150

微任务和宏任务的区别及具体场景

微任务和宏任务皆为异步任务，它们都属于一个队列，主要区别在于他们的执行顺序，Event Loop的走向和取值。

任务之间的一些划分

概念

1.宏观任务：当前调用栈中执行的代码成为宏任务。（主代码块、setTimeout、setInterval、I/O、UI 交互事件、setImmediate等等）。

2.微观任务： 当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。（Promise.then、MutaionObserver、process.nextTick等等）。

3.宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由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

为什么答案会是这样的呢，按照同步任务->微任务->宏任务的执行顺序去检查，会慢慢深入人心的。
比较难理解的应该是代码块2，同步执行的按顺序执行就好了，在输出同步任务X1，输出微任务X2后，因为setTimeout又是一个宏任务，所以会被排到所有的宏任务之后，所以就会在7，8的后面出现打印。
那我们在 宏任务2中的宏任务 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

---