js 事件循环 & 宏任务 & 微任务 All In One

js 事件循环 & 宏任务 & 微任务 All In One

Node.js v10+ === Browser js

async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}

async function async2() {
  console.log('async2');
}

console.log('script start');

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

async1();

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

console.log('script end');


/* 
  script start

  async1 start
  async2
  promise1

  script end

  async1 end
  promise2

  setTimeout

按照顺序：1. 先依次执行代码中所有同步代码，2. 再执行微任务里面的同步代码，3. 然后依次执行微任务队列里面所有异步微任务，4. 最后执行宏任务队列里面的所有异步宏任务， 5. 直到本次事件循环结束，进入下一次的事件循环♻️；


*/

js 事件循环

步骤

1. 先依次执行代码中所有同步代码；
2. 再执行微任务里面的同步代码；
3. 然后依次执行微任务队列里面所有异步微任务；
4. 最后执行宏任务队列里面的所有异步宏任务；
5. 直到本次事件循环结束，进入下一次的事件循环♻️；

js 宏任务 macro task

setTimeout/setInterval/setImmediate/requestAnimationFrame/IO/UI rendering/

??? AJAX 请求

js 微任务 micro task

Promise(.then/.catch/.finally/await)/queueMicrotask/process.nextTick/MutationObserver

??? fetch API

微任务仅来自于我们的代码。
它们通常是由 promise 创建的：对 .then/catch/finally 处理程序的执行会成为微任务。
微任务也被用于 await 的“幕后”，因为它是 promise 处理的另一种形式。

还有一个特殊的函数 queueMicrotask(func)，它对 func 进行排队，以在微任务队列中执行。

每个宏任务之后，引擎会立即执行微任务队列中的所有任务，然后再执行其他的宏任务，或渲染，或进行其他任何操作。

queueMicrotask

nextTick

process.nextTick

MutationObserver

refs

https://www.cnblogs.com/xgqfrms/p/14025969.html

https://zh.javascript.info/event-loop

https://stackoverflow.com/questions/25915634/difference-between-microtask-and-macrotask-within-an-event-loop-context

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 ️，侵权必究⚠️！

---