js 宏任务和微任务

js 执行时首先会从宏任务中获取第一个并执行,执行过程中会将遇到的微任务放入微任务队列,当宏任务执行完成时再去依次执行微任务队列中的任务,执行完之后再去获取第二个宏任务,周而复始,直至全部执行完成。


宏任务和微任务之间的关系
console.log('1');
setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})
setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

打印结果为:

// 首先执行第一个宏任务
1
7
// 宏任务执行完成,执行微任务
6
8
// 微任务执行完成,执行第二个宏任务
2
4
// 宏任务执行完成,执行微任务
3
5
// 微任务执行完成,执行第三个宏任务
9
11
// 宏任务执行完成,执行微任务
10
12
// 全部执行完成,结束

上面的运行结果是 js在浏览器中的运行结果,而nodejs的运行结果是:1 7 6 8 2 4 9 11 3 5 10 12。造成这种结果不一致的原因是因为js的 Event Loop 是根据 HTML5 中定义的规范,而 Nodejs 是由 libuv库 实现的。libuv库流程大体分为6个阶段:timers,I/O callbacks,idle、prepare,poll,check,close callbacks,和浏览器的microtask,macrotask那一套有区别(nodejs在10+版本之后执行顺序和浏览器相同)。

宏任务(macrotask):由宿主环境提供。

  • I/O
  • setTimeout
  • setInterval
  • setImmediate
  • requestAnimationFrame

微任务(microtask):由语言标准提供,可理解为回调函数。

  • process.nextTick(在nodejs中优先级大于其它微任务)
  • MutationObserver
  • Promise .then .catch .finally
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。