浏览器事件循环

宏任务 & 微任务

JS 把异步任务分为宏任务和微任务。ES5 之后，JavaScript 引入 Promise，不需要浏览器，JavaScript 引擎自身也可以发起异步任务了。

宏任务由宿主（浏览器，Node）发起

宏任务包括 script，事件，网络请求（AJAX/Fetch），setTimeout，setInterval，setImmediate，I/O、UI 交互事件由宿主发起。

微任务由 JS 引擎发起。

Promise.then, Promise.catch, Promise.finally, MutationObserver 是微任务，由 JS 引擎发起。

注意：Promise 本身是同步的，但是其 then/catch 的回调是异步的。

宏任务、微任务执行过程

1. 同步代码（js 执行/回调栈）
2. 微任务的异步代码（js 引擎）
   promise.nextTick(node)
   Promise.then() Promise.catch()
   Async/Await
   Object.observe 等等
3. 宏任务的异步代码（宿主环境）
   script(代码块)
   setTimeout，setInterval，setImmediate

一次事件循环 = (同步代码 + 微任务队列 + 宏任务队列) 放入执行栈，先进先出，执行完成。

举例

1. 执行顺序

console.log("a");
setTimeout(function () {
  console.log("b");
}, 0);
const p = new Promise((resolve, reject) => {
  console.log("c");
  resolve(1000);
  console.log("d");
});
p.then((data) => {
  console.log(data);
});
console.log("e");

输出结果：

a
c
d
e
1000
b

2. 执行顺序

Promise.resolve().then(() => {
  // 微任务1
  console.log("Promise1");
  setTimeout(() => {
    // 宏任务2
    console.log("setTimeout2");
  }, 0);
});
setTimeout(() => {
  // 宏任务1
  console.log("setTimeout1");
  Promise.resolve().then(() => {
    // 微任务2
    console.log("Promise2");
  });
}, 0);

输出结果：

Promise1
setTimeout1
Promise2
setTimeout2

最后输出顺序为：Promise1 => setTimeout1 => Promise2 => setTimeout2。具体流程如下：

同步任务执行完毕。微任务 1 进入微任务队列，宏任务 1 进入宏任务队列。
查看微任务队列，微任务 1 执行，打印 Promise1，生成宏任务 2，进入宏任务队列。
查看宏任务队列，宏任务 1 执行，打印 setTimeout1，生成微任务 2，进入微任务队列。
查看微任务队列，微任务 2 执行，打印 Promise2。
查看宏任务队列，宏任务 2 执行，打印 setTimeout2。

3. 执行顺序

const p = new Promise((resolve) => {
  console.log(0);
  resolve();
});
p.then((res) => {
  console.log(1);
})
  .then((res) => {
    console.log(2);
  })
  .then((res) => {
    console.log(3);
  });
p.then((res) => {
  console.log(4);
});
p.then((res) => {
  console.log(5);
});
p.then((res) => {
  console.log(6);
});

输出顺序：

0
1
4
5
6
2
3

4. 执行顺序

async function async1() {
  console.log("async1 start"); // 2
  await async2();
  // 微任务
  console.log("async1 end");
}
async function async2() {
  console.log("async2"); // 3
}
console.log("script start"); // 1
setTimeout(function () {
  // 宏任务
  console.log("setTimeout");
}, 0);
async1();
new Promise(function (resolve) {
  console.log("promise1"); // 4
  resolve();
}).then(function () {
  // 微任务
  console.log("promise2");
});
console.log("script end"); // 5

输出顺序：

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

5. 执行任务

async function async1() {
  console.log("async1 start"); // 2
  await async2();
  // 微任务
  console.log("async1 end"); // 这里不会执行
}
async function async2() {
  console.log("async2 start"); // 3
  return new Promise((resolve, reject) => {
    reject();
    console.log("async2 promise"); // 4
  });
}
console.log("illegalscript start"); // 1

setTimeout(function () {
  // 宏任务
  console.log("setTimeout");
}, 0);

async1();

new Promise(function (resolve) {
  console.log("promise1"); // 5
  resolve();
})
  .then(function () {
    // 微任务
    console.log("promise2");
  })
  .then(function () {
    // 微任务
    console.log("promise3");
  });
console.log("illegalscript end"); // 6

输出顺序

illegalscript start
async1 start
async2 start
async2 promise
promise1
illegalscript end
promise2
promise3
setTimeout

6. 执行任务

new Promise((resolve, reject) => {
  resolve(1);
  new Promise((resolve, reject) => {
    resolve(2);
  }).then(console.log);
}).then(console.log);
console.log(3);

输出结果

3;
2;
1;

7. 执行任务

setTimeout(() => {
  // 宏任务
  console.log(1);
}, 0)
new Promise((resolve, reject) => {
  console.log(2); // 1
  resolve('p1');

  new Promise((resolve, reject) => {
    console.log(3); // 2
    setTimeout(() => {
      // 宏任务
      resolve('setTimeout2');
      console.log(4);
    }, 0);
    resolve('p2');
  }).then(data => {
    // 微任务
    console.log(data); // p2
  })

  setTimeout(() => {
    // 宏任务
    resolve('setTimeout1');
    console.log(5);
  }, 0);
}).then(data => {
  // 微任务
  console.log(data); // 4
});
console.log(6); // 3

输出结果

2
3
6
p2
p1
1
4
5

EventLoop

1. JS 是单线程的，同一个时间只能做一件事情
2. 同步代码：立即放入 JS 引擎（JS 主线程）执行，并原地等待结果。
3. 异步代码：先放入宿主环境（浏览器/Node），不必原地等待结果，并不阻塞主线程继续执行，异步结果在将来执行。异步任务等待时机到了以后把代码（回调函数）交给任务队列去排队执行。
4. 每次事件循环就是执行栈里面代码执行完毕后，去查看任务队列里面是否还有其他任务需要执行，如果有，就按顺序依次执行。