宏观与微观：在JavaScript的世界里细说宏任务与微任务

2024-01-22 10:12:40

一场虚幻的争论，实则一场信息获取的不对等

JavaScript一直被称为单线程语言，但这并不意味着它只能做一件事情。事实上，JavaScript可以通过异步编程来同时处理多个任务。异步编程允许JavaScript在不阻塞主线程的情况下运行任务，从而使Web应用程序更加流畅和响应迅速。

为了实现异步编程，JavaScript提供了两种类型的任务：宏任务和微任务。宏任务是在主线程上执行的任务，而微任务是在主线程空闲时执行的任务。

宏任务和微任务的运作方式

宏任务和微任务都是在JavaScript事件循环中执行的。事件循环是一个循环，它不断地检查是否有任务需要执行。如果宏任务队列和微任务队列中都有任务，那么宏任务队列中的任务将首先执行。当宏任务队列中的任务全部执行完毕后，微任务队列中的任务才会执行。

宏任务的代表们

宏任务的典型代表包括：

setTimeout()
setInterval()
script标签
I/O操作（如读取文件）

微任务的代表们

微任务的典型代表包括：

Promise
MutationObserver
process.nextTick（Node.js）

举个栗子，更好理解

为了更好地理解宏任务和微任务，我们来看一个例子。假设我们有一个这样的JavaScript代码：

setTimeout(() => {
  console.log('宏任务1');
}, 0);

Promise.resolve().then(() => {
  console.log('微任务1');
});

setTimeout(() => {
  console.log('宏任务2');
}, 0);

Promise.resolve().then(() => {
  console.log('微任务2');
});

当这段代码执行时，会发生以下情况：

首先，JavaScript引擎会将两个setTimeout()任务和两个Promise.resolve()任务添加到事件循环中。
然后，JavaScript引擎会执行主线程上的任务，也就是script标签中的代码。
在script标签中的代码执行完毕后，JavaScript引擎会检查事件循环中是否有任务需要执行。发现宏任务队列中有两个setTimeout()任务，于是将它们添加到主线程中执行。
setTimeout()任务执行完毕后，JavaScript引擎再次检查事件循环中是否有任务需要执行。发现微任务队列中有两个Promise.resolve()任务，于是将它们添加到主线程中执行。
Promise.resolve()任务执行完毕后，JavaScript引擎会继续执行主线程上的任务，也就是script标签中的代码。

通过这个例子，我们可以看到宏任务和微任务的执行顺序是：宏任务先执行，然后才是微任务。

宏任务和微任务的意义

宏任务和微任务对于异步编程非常重要。通过合理利用宏任务和微任务，我们可以编写出更加流畅和响应迅速的Web应用程序。

结语

宏任务和微任务是JavaScript异步编程的基石。通过理解宏任务和微任务的概念和运作方式，我们可以编写出更加高效和易于维护的代码。