JS执行过程图原理图

说明

JS是单线程的

• JS 中用来存储待执行回调函数的队列包含2个不同特定的队列

1. 宏队列：用来保存待执行的宏任务（回调），比如：定时器回调/DOM 事件回调/ajax 回调

2. 微队列：用来保存待执行的微任务（回调），比如：promise 的回调/MutationObserver 的回调

• JS 执行时会区别这2个队列

1. JS 引擎首先必须执行所有的初始化同步任务代码

2. 每次准备取出第一个宏任务前，都要将所有的微任务一个一个取出来执行

总结： 同步任务——微队列——宏队列

例子

setTimeout(() => {
    
     // 放入宏队列   3
  console.log('timeout()1');
  Promise.resolve(5).then(value=>{
    
     // 放入微队列   4
  console.log('promise resolve()5', value);
});
}, 0);
Promise.resolve(2).then(value=>{
    
     // 放入微队列   1
  console.log('promise resolve()2', value);
});
setTimeout(() => {
    
     // 放入宏队列  5
  console.log('timeout()3');
}, 0);
Promise.resolve(4).then(value=>{
    
     // 放入微队列   2
  console.log('promise resolve()4', value);
});
// 11宏队列与微队列.html:18 promise resolve()2 2
// 11宏队列与微队列.html:24 promise resolve()4 4
// 11宏队列与微队列.html:12 timeout()1
// 11宏队列与微队列.html:14 promise resolve()5 5
// 11宏队列与微队列.html:21 timeout()3

参考

尚硅谷Promise教程