浏览器事件循环之宏任务和微任务

node 事件循环见：https://www.jianshu.com/p/69d2b70d3163。
参考：https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/?utm_source=html5weekly

we don't add another mutation microtask as one is already pending

image.png

三个概念：JS堆栈、宏任务、微任务。
js 是一个单线程语言。
在执行一个js文件的过程中，js堆栈中一直有任务，执行过程中，如果碰到了宏任务或者微任务，会将其分别放入宏任务队列和微任务队列中。
当js文件被执行完，js堆栈为空，此时执行微任务队列中的所有任务。当执行微任务过程中碰到宏任务或者微任务，同样会将其分别放入宏任务队列和微任务队列中。
当微任务队列为空，此时执行宏任务队列中的所有任务。在执行过程中

总结一下：

宏任务按顺序执行，且浏览器在每个宏任务之间渲染页面
所有微任务也按顺序执行，且在以下场景会立即执行所有微任务:

• 每个回调之后且js执行栈中为空。

• 每个宏任务结束后。

  
  image.png

例子：

console.log('script start');

setTimeout(function () {
    console.log('setTimeout');
    Promise.resolve().then(function () {
        console.log(333)
    })
}, 0);

Promise.resolve()
    .then(function () {
        console.log('promise1');
        setTimeout(function () {
            console.log('11111'); 
            Promise.resolve().then(function () {
                console.log(444)
            })
        }, 0)
    })
    .then(function () {
        console.log('promise2');
        Promise.resolve().then(function () { console.log(222) })
    });

console.log('script end');

执行结果：（Chrome 89）

image.png