事件循环与宏任务、微任务

1. 宏任务与微任务

定义

宏任务：就是用户的一些操作的回调，如鼠标点击事件，键盘事件，ajax请求，dom操作等
微任务：js引擎的操作的回调，promise，mutationObserver等

宏任务与微任务分别包括哪些事件

macrotasks: script，setTimeout, setInterval, setImmediate(Node), I/O(Node), UI rendering
microtasks: process.nextTick(Node), Promises, MutationObserver

2.事件循环（Event Loop）

image.png

当一个宏任务进入执行栈中的时候，会先判断是同步任务还是异步任务，如果是同步任务，就放入主线程中立即执行，异步任务的话就先放入事件队列中排队等待。
当同步任务执行完毕后，就会被弹出执行栈，然后会先从事件队列中按照先进先出的规则依次从事件队列中取出宏任务内包含的微任务执行。
当其内的微任务也全部执行完毕，然后取出事件队列中的下一个宏任务入栈继续执行，直到事件队列为空则停止循环。
下面我们做一个简单的练习：

console.log('script start');

setTimeout(function () {
  console.log('setTimeout');
}, 0);

Promise.resolve()
  .then(function () {
    console.log('promise1');
  })
  .then(function () {
    console.log('promise2');
  });

console.log('script end');

打印结果： script start、script end、promise1、promise2、setTimeout

3. 难度升级

相信大家已经理解了基础的事件循环了，那接下来增加一点难度，让我们看看下面这段代码，我可以先告诉大家，当使用不同的方式触发它时，我们得到的结果是不一样的。

var outer = document.querySelector('.outer');
var inner = document.querySelector('.inner');

new MutationObserver(function () {
  console.log('mutate');
}).observe(outer, {
  attributes: true,
});

function onClick() {
  console.log('click');
  setTimeout(function () {
    console.log('timeout');
  }, 0);

  Promise.resolve().then(function () {
    console.log('promise');
  });

  outer.setAttribute('data-random', Math.random());
}

inner.addEventListener('click', onClick);
outer.addEventListener('click', onClick);

当我们通过鼠标点击触发时，
它的打印结果是： click、 promise、mutate、click、promise、mutate、timeout、timeout

但是，当我们再在这段代码中加一行：

inner.click()

这段代码输出的顺序就变成了：click, click,promise,mutate,promise,timeout,timeout

这是为什么呢？

因为：

当执行到inner.click时，因为是js调用的所以属于script中的同步任务。因此当onClick任务入栈的时候script任务并没有出栈，此时执行栈中有两个任务script和onClick。
执行onClick输出click,把setTimeout放入宏任务队列，promise和setAttribute的执行监听mutation放入微任务队列。onClick任务执行完毕，出栈。
本应该执行onClick中的微任务队列的，但是此时执行栈中的script任务并没有执行完成，所以并没有执行出栈操作，所以微任务队列继续排队。当执行栈为空时会立即执行微任务，但是当执行栈不为空时，微任务就会继续排队。
因为事件冒泡机制，所以outer的click事件被触发入栈，继续上一步执行顺序，但当执行到setAttribute时，因为当一个微任务队列中有MutationObserver时将不会再重复放入队列中相同的，所以不再进入微任务队列
onClick全部执行完毕出栈，script的任务执行完毕出栈。执行栈为空，开始让微任务队列进入执行微任务，依次输出promise, mutate, promise后微任务全部执行完毕出栈后，执行宏任务队列中的宏任务setTimeout。

4. 一些补充

const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve(console.log('222222'));   // 这个不是异步
  setTimeout(() => {
    console.log(2);
  })
  reject('error');
})
promise.then((e) => {
    console.log(3);
}).then(() => {
    console.log(5)
}).catch(e => console.log(e))
console.log(4);

打印结果

image.png

声明：我觉得这篇文章写的特别详细，只是想自己写一遍巩固一下。感谢作者。《Tasks, microtasks, queues and schedules》

最后编辑于：2021.04.23 15:57:28