前端同步和异步宏任务和微任务

前端同步和异步指的是 JavaScript 代码执行的方式。同步代码会按照顺序执行，直到执行完毕；异步代码则会在后台执行，不会阻塞程序的执行。

宏任务和微任务是指异步代码的执行顺序。在 JavaScript 引擎中，异步代码会被分为宏任务和微任务两种类型。其中，宏任务包括 setTimeout、setInterval、setImmediate、I/O 操作等，而微任务包括 Promise、process.nextTick 等。

在事件循环中，每次执行完一个宏任务后，会检查是否有微任务需要执行，如果有，则会按照先进先出的顺序执行微任务队列中的任务。执行完所有微任务后，才会继续执行下一个宏任务。这就是 JavaScript 中的异步执行模型。

需要注意的是，在同步代码执行的过程中，如果遇到了异步代码，会将其加入到宏任务队列中，等待下一个事件循环周期执行。因此，异步代码的执行顺序不一定是按照代码顺序执行的。

相关问题

前端中的宏任务与微任务

在前端开发中，宏任务和微任务也是指异步任务的执行模型，用于控制任务的执行顺序。在浏览器环境中，常见的异步任务包括事件回调、定时器和网络请求等。

宏任务（macro task）在前端中包括：

1. 渲染事件（如页面加载、页面重新渲染）
2. 用户交互事件（如点击、滚动、输入等）
3. 定时器事件（如setTimeout和setInterval）
4. 网络请求完成、文件读写完成等I/O操作

微任务（micro task）在前端中包括：

1. Promise回调函数（then、catch、finally）
2. MutationObserver的回调函数

当执行栈中的同步代码执行完毕后，会检查是否有微任务需要执行。如果有微任务，会一直执行完所有的微任务，直到微任务队列为空。然后再执行下一个宏任务。

需要注意的是，微任务具有更高的优先级，它们会在下一个宏任务之前立即执行。这意味着，在同一个宏任务中产生的微任务会在该宏任务结束前执行完毕。这种机制保证了微任务能够及时响应并更新UI，提高了用户体验。

前端控制异步任务执行顺序

### 前端 JavaScript 中控制异步任务执行顺序的方法

#### 使用 `Promise` 链式调用
链式调用是处理多个依赖于彼此完成的异步操作的有效方式。每个 `.then()` 或者 `.catch()` 方法都会返回一个新的 Promise 对象，允许进一步的操作被附加到链条上。

function taskA() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('Task A completed');
      resolve();
    }, 1000);
  });
}

function taskB() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('Task B completed');
      resolve();
    }, 500);
  });
}

taskA()
  .then(taskB)
  .then(() => console.log('All tasks are done'))[^1];

#### 利用 `async/await`
此语法糖使得编写更易读且结构化的异步代码成为可能。它本质上是在等待 Promises 完成的同时暂停函数执行直到它们解决或拒绝。

async function executeTasksSequentially() {
  await taskA(); // Wait for Task A to complete before moving on.
  await taskB(); // Only start Task B after Task A has finished.
  console.log('Both tasks have been executed sequentially.');
}

executeTasksSequentially()[^3];

#### 处理并发任务并指定其运行次序
当有若干独立不相依的任务需同时启动但又希望按特定序列获取结果时，可借助 `Promise.all([])` 来实现这一点。这会创建一个新 promise，在所有给定输入 promises 成功完成后才会解析，并传递由这些 promises 结果组成的数组作为参数。

// Assume both functions now return resolved values instead of just logging messages.

const allPromises = [taskA(), taskB()];
Promise.all(allPromises).then(results => {
  console.log(`Results from all tasks: ${results}`);
});

对于微任务（microtasks），如 MutationObserver 和 process.nextTick (Node.js)，以及宏任务（macrotasks）像 timers (`setTimeout`, `setInterval`)、I/O operations 等之间的区别也值得注意。前者会在当前同步任务结束后立即被执行，而后者则会被放入事件队列中等待下一次循环迭代来处理[^4]。