js中的微任务和宏任务，附面试题

因为javascript是一门单线程语言，所以代码的解析执行都要以自上而下的执行，直到任务队列（task queue）的出现，js开始有了异步任务，当一段代码需要稍后执行时，便可以使用异步方案（setTimeout、setInterval、Poromis、Axios、Dom事件）来使指定操作添加到异步任务中。

代码执行流程： 主线程 => 微任务 => 宏任务

MDN

JavaScript 本质上是一门单线程语言。对于在它被设计出来的那个年代来说，这样的设计是一个很好的选择。那个时候的人们很少有多处理器计算机，并且当时也只是打算用 JavaScript 来编写少量的代码。

当然，随着时间的流逝，电脑的性能得到了飞速的提升。JavaScript 也变成了众多流行语言中的一员。许多非常受欢迎的应用或多或少都有 JavaScript 的影子。为此，找到一种可以突破传统单线程语言限制的方法变得很有必要。

自从 (setTimeout() 和 setInterval()) 加入到 Web API 后，浏览器提供的 JavaScript 环境就已经逐渐开始包含了任务安排、多线程应用开发等强大的特性。了解 JavaScript 运行时是如何安排和运行代码的对了解 queueMicrotask() 会非常有作用。

1. 面试题（答案在最后）

setTimeout(function () {
  console.log("setTimeout1");
  new Promise(function (resolve) {
    resolve();
  }).then(function () {
    new Promise(function (resolve) {
      resolve();
    }).then(function () {
      console.log("then4");
    });
    console.log("then2");
  });
});

new Promise(function (resolve) {
  console.log("promise1");
  resolve();
}).then(function () {
  console.log("then1");
});

setTimeout(function () {
  console.log("setTimeout2");
});

console.log(2);

queueMicrotask(() => {
  console.log("queueMicrotask1")
});

new Promise(function (resolve) {
  resolve();
}).then(function () {
  console.log("then3");
});

 

2. 面试题

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

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

console.log('script start')

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

console.log('script end')

 

3. 答案

// promise1
// 2
// then1
// queueMicrotask1
// then3
// setTimeout1
// then2
// then4
// setTimeout2

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